Having difficulty to assign ng-model values inside ng-repeat
So i am repeating this div with an array of json objects. I can print the 'ID' value of the object inside any element. But i can't use that as the ng-model value for the checkbox inside. I must be doing something wrong here. Any idea what that is?
Will really appreciate it if someone can take a look.
Here is a codepen of the issue. Code pen link
. value for the model that assign to the checkbox is boolean whether it is true or false, unless you define the value. but again it is only 2 options value.
so, rather than using id as model attribute, you might change it to some attribute that could store boolean value. why not using 'isSelected'
<div ng-controller="quoteController" ng-app="MyApp" class="benefits-container"> <!-- benefits --> <div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}"> <div class="top"> <md-checkbox ng-model="pe.isSelected" class="blue"></md-checkbox> <h5 class="item">{{pe.name}}</h5> <h5 class="prize">{{pe.loading}}</h5> </div> <div class="bottom"> <p>{{pe.limitDisplay}}</p> </div> </div> </div> then update some isSelected value:
... { "id": "PVC022", "name": "NCD Protector", "limit": null, "limitDisplay": "N/A", "desc": "<TBC>", "type": "optional", "loading": 0.0, "isSelected": true }, ... i have done exactly the same code the difference is the filter that you applied on ng-bind. try reading the article i suggest use ng-value.
try using ng-repeat and ng-model withing the same line.
instead of this
<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}"> <div class="top"> <md-checkbox ng-model="pe.id" class="blue"></md-checkbox> use this
<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}" ng-model="pe.id"> <div class="top"> <md-checkbox class="blue"></md-checkbox> 