The Ng-model attribute in the ng-repeat input flag always becomes literal or gives an error

Question

Therefore, I need to know additional characteristics of the car than the user wants to include in their preferences. I am trying to create input flags from an array retrieved using an ajax request and generate inputs using ng-repeat. The main goal is to know the checkboxes selected by the user. I would like my approach to create an auxiliar array that contains the selected ones, but I don't know how to set a unique ng model for each element in the ng-repeat iteration, so I can find out a list of the selected Items. I think there is something left in my knowledge of angular. Here is what I have now.

In the controller ...

$http.get('/ajax/ajax_get_extras/'+$scope.car.version+'/false').success(function(data) { $scope.extras = data; }); $scope.addExtra = function(){ // ... manage the auxiliar array } 

In html ...

 <div ng-controller="Controller"> <form novalidate class="simple-form"> <span ng-repeat="extra in extras"> <input type="checkbox" ng-model="extra.id" ng-change="addExtra()" name="extra_{{extra.id}}" >{{extra.name}} - <strong>{{extra.real_price | onlynumber | currency}}</strong> </span> </form> </div> 

And I'm stuck, since extra.id does not convert to real extra.id and stays as the string "extra.id"> _ <

I tried extra _ {{extra.id}} , extra.id , {{extra.id}} , $ index , like the ng model, and nothing works.

Answer 1

AngularJS 1.1.5 has a "track by" that you can use in ngRepeat.

So you can:

  <input type="checkbox" ng-repeat="e in extra track by $index" ng-model="extra[$index]"> 

Here is an example: http://plnkr.co/edit/6lNo6R5EPsNGHUU6ufTE?p=preview