Dynamically create scope variables and ng-models in Angular

Question

I'm using this angular directive to add rating to my Ionic app.

Including two ratings on one page would look like this:

$scope.rating1 = {};
$scope.rating1.rate = 0;
$scope.rating1.max = 5;

$scope.rating2 = {};
$scope.rating2.rate = 0;
$scope.rating2.max = 5;

<rating ng-model="rating1.rate" max="rating1.max"></rating>
<rating ng-model="rating2.rate" max="rating2.max"></rating>

This works well, but I wish to integrate this in an ng-repeat which shows a certain amount of questions.

Something like:

<ion-list ng-repeat="n in notif">{{n.question}}<br />
<rating ng-model="rating{{n.id}}.rate" max="rating{{n.id}}.max">
</rating>
</ion-list>

but that doesn't work.

I'm also wondering how I could "make" the scope vars depending on the amount of question. Right now, I just added

$scope.rating1 = {};
$scope.rating1.rate = 0;
$scope.rating1.max = 5;

$scope.rating2 = {};
$scope.rating2.rate = 0;
$scope.rating2.max = 5;

...

ten times, but can this be dynamic too in Angular?

Update:

I've managed to make the scopes and give them a value using:

        function make_rating_scopes(string, value)
        {
            var the_string = string;
            var model = $parse(the_string);
            model.assign($scope, value);
            $scope.$apply();
        }

but the first part is still a mystery.

Claies · Accepted Answer · 2016-01-09 18:34:01Z

1

You are over-thinking this. Rating can be any object ({}). Since your notif is an array of question objects, you can simply add a property to represent the rating. You can also add a property for the max, or use a $scope property if all the max are the same.

For example:

$scope.maxRating = 10;
$scope.notif = [{
  question: "question1",
  rating: 3
}, {
  question: "question2",
  rating: 4
}, {
  question: "question3",
  rating: 5
}, {
  question: "question4",
  rating: 8
}];

<ion-list ng-repeat="n in notif">
  {{n.question}}
  <rating ng-model="n.rating" max="maxRating"></rating>
</ion-list>

answered Jan 9, 2016 at 18:34

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

binoculars Over a year ago

Nice, that seems to work! Any idea how I can get the value of a rating? I used to use $scope.rating.rate ...

Claies Over a year ago

you still are overthinking this. the rating1, rating2, etc. objects aren't necessary for this component. It merely takes a value that is assignable and a max and produces the display element. In case of my example, n.rating (or $scope.notif[0].rating, $scope.notif[1].rating, etc.) hold the value that changes and is reflected in the display. these could just as easily be $scope.notif[0].rate or $scope.notif[0].someCrazyNameForRatingVariable. The rating is simply a property of the object, nothing more.

Collectives™ on Stack Overflow

Dynamically create scope variables and ng-models in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related