Dynamically add property to object in angularjs ng-repeat

Question

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>

if the property is not available in object, you want that object property to be added dynamically? — Mayank Nimje
– Mayank Nimje, Commented Jan 2, 2017 at 5:11
can you hard code some example like how the property should be? — Sharmila
– Sharmila, Commented Jan 2, 2017 at 5:13
after checked and unchecked the check boxes the list should look like this- scope.reasons = [ {sourceName:'Lack of rainfall',postAdequate:true }, { sourceName: 'Change in land use',postAdequate:false }, {sourceName:'Change in Land Cover',postAdequate:true}] — Alamgir
– Alamgir, Commented Jan 2, 2017 at 5:18

M. Junaid Salaat · Accepted Answer · 2017-01-02 05:32:43Z

1

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

edited Jan 2, 2017 at 5:32

answered Jan 2, 2017 at 5:26

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

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

3 Comments

charlietfl Over a year ago

ng-change isn't doing anything related to question. Explanation doesn't make sense

Alamgir Over a year ago

if i use ng-model instead of ng-checked that solved. jajhakallah junaid vi. no need to use ng-change

M. Junaid Salaat Over a year ago

Yes @Alamgir , its just for checking purpose you can remove it, and no problem, here to help. :)

Avnesh Shakya · Accepted Answer · 2017-01-02 05:37:38Z

1

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.

edited Jan 2, 2017 at 5:37

answered Jan 2, 2017 at 5:33

Avnesh Shakya

3,9162 gold badges25 silver badges32 bronze badges

2 Comments

charlietfl Over a year ago

can't use ng-checked and ng-model on same element per docs

Avnesh Shakya Over a year ago

Thanks @charlietfl, I forgot to remove, I updated answer, Thanks again.

charlietfl · Accepted Answer · 2017-01-02 05:34:13Z

0

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
})

edited Jan 2, 2017 at 5:34

answered Jan 2, 2017 at 5:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Sharmila · Accepted Answer · 2017-01-02 05:34:42Z

0

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>

answered Jan 2, 2017 at 5:34

Sharmila

7954 silver badges11 bronze badges

Collectives™ on Stack Overflow

Dynamically add property to object in angularjs ng-repeat

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related