Angularjs Data Binding Checkboxes To Object If Checked

I have a JSON object which I am repeating with ng-repeat, the keys are strings, and the values are an array. I am listing each of the values as a checkbox. I would like to create a

Solution 1:

My examples have your angular logic in the recommended syntax (non-global). There were also several issues with your markup that I have corrected.

In this example, ng-model="x" is a placeholder that I don't use, but ng-model must be present or an error is thrown. I am using ng-change to handle the link between the checkboxes and $scope.outputs.

Live demo here (click).

Markup:

<divng-app="myApp"ng-controller="myCtrl"><h3 >Dynamic data binding AngularJS</h3><h4>Inputs</h4><ul><ling-repeat="(typeKey, typeVal) in inputs"><span>{{typeKey}} : </span><ul><ling-repeat="value in typeVal"><label>{{value}}
            <inputtype="checkbox"ng-model="x"ng-change="setOutput(typeKey, $index, value)"
            ></label></li></ul></li></ul><h4>Outputs</h4><ulng-repeat="(key,value) in inputs"><li>{{key}} : {{outputs[key]}}</li></ul></div>

JavaScript:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.outputs = {};
  $scope.inputs = {
    'category': ['one','two','three'],
    'color':['blue','green']
  };
  $scope.setOutput = function(typeKey, $index, value) {
    $scope.outputs[typeKey] = $scope.outputs[typeKey] || [];
    $scope.outputs[typeKey][$index] = value;
  };
});

Another Solution

Live demo here (click).

First, I used ng-init to dynamically add the first-level properties from inputs to outputs. Then you just needed to set your ng-model and ng-checked properties to the correct location in outputs.

Markup:

<divng-app="myApp"ng-controller="myCtrl"><h3 >Dynamic data binding AngularJS</h3><h4>Inputs</h4><ul><ling-repeat="(typeKey, typeVal) in inputs"ng-init="outputs[typeKey] = outputs[typeKey] || {}"><span>{{typeKey}} : </span><ul><ling-repeat="value in typeVal"><label>{{value}}
            <inputtype="checkbox"ng-model="outputs[typeKey][value]"ng-checked="outputs[typeKey][value]"value="outputs[typeKey][value]"
            ></label></li></ul></li></ul><h4>Outputs</h4><ulng-repeat="(key,value) in inputs"><li>{{key}} : {{outputs[key]}}</li></ul></div>

JavaScript:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.outputs = {};
  $scope.inputs = {
    'category': ['one','two','three'],
    'color':['blue','green']
  };
});

Solution 2:

You need to bind to the value for the parent, as checkboxes don't work like that. Here's an example:

<h3 >Dynamic data binding in AngularJS</h3><divng-appng-controller="Controller"class="container"><h4>Inputs</h4><ulng-repeat="(parent, values) in inputs"><span>{{parent}} : </span><ling-repeat="value in values"><label>{{value}}
            <inputtype="checkbox"ng-model="output[parent][value]"ng+checked="output[parent][value]"value="value" ></input></label></li></ul><h4>Outputs</h4><ulng-repeat="(key,value) in inputs"><li>
            {{key}} : {{output[key]}}
        </li></ul></div>

And in the controller create the keys beforehand

functionController($scope) {
    $scope.output = { 'category': {}, color: {} };
    $scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}

jsfiddle: http://jsfiddle.net/5eeVc/

Solution 3:

Have a look at this plunk, i have handled two different scenarios. Just sharing it as a knowledge article

Plunk

<h3>First Scenario <small>Handling JSON source </small></h3><divclass="container-fluid"><divclass="row"><divclass="col-xs-6 col-sm-6 col-md-6 col-lg-6"><h4>Available options</h4><divng-repeat="item in itemList"><mark>{{item.name}}</mark><inputtype="checkbox"ng-model="modelContainer[$index].checked" /></div></div><divclass="col-xs-6 col-sm-6 col-md-6 col-lg-6"><h4class="text-success">Selected options</h4><ul><ling-repeat="item in modelContainer | filter: {checked:true}">
            {{item.item.name}} <ahref="#"class="cl"ng-click="uncheck(item.item.id)">X</a></li></ul></div></div></div><br><pclass="text-danger">itemList</p><code>{{itemList}}</code><br><br><pclass="text-danger">modelContainer</p><code>{{modelContainer}}</code><hr><h3>Second Scenario <small>Handling map Source </small></h3><divclass="container-fluid"><divclass="row"><divclass="col-xs-6 col-sm-6 col-md-6 col-lg-6"><h4>Available options</h4><divng-repeat="item in Maplist"><mark>{{item}}</mark><inputtype="checkbox"ng-model="modelContainer1[$index].checked" /></div></div><divclass="col-xs-6 col-sm-6 col-md-6 col-lg-6"><h4class="text-success">Selected options</h4><ul><ling-repeat="item in modelContainer1 | filter: {checked:true}">
            {{item.name}} <ahref="#"class="cl"ng-click="uncheck1(item.id)">X</a></li>`enter code here`
        </ul></div></div></div>