CODEWITHSUNDEEP
htmlangularjsangularjs-ng-repeat
Alamgir
Alamgir

Reputation: 686

Dynamically add property to object in angularjs ng-repeat

I have a list of object and iterating that list using ng-repeat to generate table row. each td contains source name and checkbox. I want to bind the checkbox with a property which is not available into list. how that is possible? The list is like that:-

scope.reasons = [
        {sourceName:'Lack of rainfall'},
        { sourceName: 'Change in land use' },
        {sourceName:'Change in Land Cover'}
        ];

and the HTML code is like that:-

<table>
  <tr ng-repeat="source in reasons">
    <td>{{source.sourceName}}</td>
    <td><input type="checkbox" ng-checked="source.postAdequate"></td>
  </tr>
</table>

Upvotes: 4

Views: 2077

Answers (4)

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Try this:

<input type="checkbox" ng-model="source.postAdequate">

See here jsfiddle link:

https://jsfiddle.net/avnesh2/5cpm48tc/2/

But it will add source.postAdequate: true/false only if you click, remains objects will remains same.

So if you want to add source.postAdequate: true/false in all add in $scope.reasons before only.

Hope this will help you.

Upvotes: 1

Sharmila
Sharmila

Reputation: 795

Can you loop the scope object once to initially set postAdequate:false for all items. Then bind that object in checkbox ng-model.

        angular.forEach($scope.reasons, function(e,i){
          e.postAdequate = false;
        });

html code

<table>
<tr ng-repeat="source in reasons">
<td>{{source.sourceName}}</td>
<td>
<input type="checkbox" ng-model="source.postAdequate" ng-click="clickfunction(source.postAdequate)">
</td></tr>
</table>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

Using ng-model instead of ng-checked will add property internally when checkbox is changed

<input type="checkbox" ng-model="source.postAdequate"></td>

If you must have that property on all objects iterate the array and add it

scope.reasons.forEach(function(item){
   item.postAdequate = false
})

Upvotes: 0

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

You can do this using the ng-model attribute, ng-change is just for the checking purposes that is change detection.

<table>
    <tr ng-repeat="source in reasons">
      <td>{{source.sourceName}}</td>
      <td>
        <input type="checkbox" ng-model="source.postAdequate" ng-change="changeDet()">
      </td>
    </tr>
  </table>

Demo Fiddle

Hope this helps

Upvotes: 1

Related Questions