Question

169

AngularJS data binding checkboxes to object if checked

rated 0 times [ 171] [ 2] / answers: 1 / hits: 47895 / 11 Years ago, fri, december 6, 2013, 12:00:00

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 second object which contains a list of only the checkboxes that are checked. I want to preserve the structure of the object with keys and values.

I'm unsure how to bind this to a model properly so that the structure is preserved.

http://jsfiddle.net/NDFc2/3/

This is my HTML

<h3 >Dynamic data binding in AngularJS</h3>

<div ng-app ng-controller=Controller class=container>

    <h4>Inputs</h4>

    <ul ng-repeat=(parent, values) in inputs>

        <span>{{parent}} : </span>

        <li ng-repeat=value in values><label>{{value}}

            <input type=checkbox ng-model=output[parent] ng-checked=output[parent] value=value >                               

            </input></label>

        </li>

    </ul>    



    <h4>Outputs</h4>

    <ul ng-repeat=(key,value) in inputs>

        <li>

            {{key}} : {{output[key]}}

        </li>

    </ul>

</div>

and my JS

function Controller($scope) {

    $scope.output = {};

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

}

Is there some simple way to do this? I have the feeling that I'm missing something minor and this will all work nicely.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorac

Add To Favorites

Follow

Total Points: 262

Total Questions: 82

Total Answers: 97

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

alorac questions

1 Invalid Form Body in Discord.js ban command

Sat, Oct 10, 20, 00:00, 4 Years ago

1 How to change URL without refreshing the page?

Tue, Sep 22, 20, 00:00, 4 Years ago

1 How to Query a Model based on its Relation in Strapi

Wed, Jul 1, 20, 00:00, 4 Years ago

1 How can I access react redux state in index.js file?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Alpine.js - nested components

Sun, May 17, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jesseh · Accepted Answer

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:

<div ng-app=myApp ng-controller=myCtrl>

  <h3 >Dynamic data binding AngularJS</h3>

  <h4>Inputs</h4>

  <ul>

    <li ng-repeat=(typeKey, typeVal) in inputs>

      <span>{{typeKey}} : </span>

      <ul>

        <li ng-repeat=value in typeVal>

          <label>{{value}}

            <input

              type=checkbox

              ng-model=x

              ng-change=setOutput(typeKey, $index, value)

            >

          </label>

        </li>

      </ul>

    </li>

  </ul>    



  <h4>Outputs</h4>

  <ul ng-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:

<div ng-app=myApp ng-controller=myCtrl>

  <h3 >Dynamic data binding AngularJS</h3>

  <h4>Inputs</h4>

  <ul>

    <li 

      ng-repeat=(typeKey, typeVal) in inputs

      ng-init=outputs[typeKey] = outputs[typeKey] || {}>

      <span>{{typeKey}} : </span>

      <ul>

        <li ng-repeat=value in typeVal>

          <label>{{value}}

            <input

              type=checkbox

              ng-model=outputs[typeKey][value]

              ng-checked=outputs[typeKey][value]

              value=outputs[typeKey][value]

            >

          </label>

        </li>

      </ul>

    </li>

  </ul>    



  <h4>Outputs</h4>

  <ul ng-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']

  };

});