user1294510 user1294510 - 5 months ago 37
AngularJS Question

angularjs dynamically pass in a JSON when checkbox is changed

<li ng-repeat="header in table.headers track by $index">


<div data-ng-if="header.type === 'checkbox'">
{{header.value}}<input type="checkbox"
ng-init="table.addBoxInputs[$index] = {type: 'checkbox', checked: false, value: header.value}"
/>
</div>




So my program dynamic generate a checkbox, and it passes in a json initially. Now I want that json's
checked
key to change to
true
or
false
, depending on if the checkbox is checked or not.

I don't want to make a method in controller and change it, is there a way to do it in the markup? I tried adding the following:

ng-model='table.addBoxInputs[$index]'
ng-change="table.addBoxInputs[$index] = {type: 'checkbox', checked: table.addBoxInputs[$index], value: header.value}"


However this wont work, cause the ng-model will just keep changing the table.addboxinput[$index] to either true or false, base on checkbox

Answer

I'm not a proponent of doing this in your markup but if that's how you want to do it then you will need to add the ng-click directive to your check box like this:

<input type="checkbox" ng-init="table.addBoxInputs[$index] = {type: 'checkbox', checked: false, value: header.value}" ng-click="table.addBoxInputs[$index].checked = !table.addBoxInputs[$index].checked" />

Here's a working plunk.