Angular Checkboxes not Binding Properly

Question

Having trouble figuring out this problem involving an Angular checkbox form generated from an API.

I can create a checkboxes but two problems: The checkedness of the boxes does not match the values in what's coming from the API, and when I click the checkboxes the name value changes from its default to "true" or "false." Have seen other similar questions but can't get this to work. Plunk here and source code below:

<!doctype html>
<html ng-app="checkTest">
    <head>
        <meta charset="utf-8">
        <title>Angular Multiple Checkboxes</title>
        <style>
            label {display:block;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
        <script type="text/javaScript">
        var jsonObj = {"fruits":[
            {
              "name": "Apple",
              "desc": "abcdefg",
              "selected": "true",
              "status": "Created"
            },
            {
              "name": "Broccoli",
              "desc": "abcdefg",
              "selected": "true",
              "status": "None"
            },
            {
              "name": "Cucumber",
              "desc": "abcdefg",
              "selected": "false",
              "status": "Created"
            },
            {
              "name": "Daikon",
              "desc": "abcdefg",
              "selected": "false",
              "status": "None"
            }
      ]};
            var fruitsObj = jsonObj.fruits;
        </script>

    </head>

    <body>
        <div ng-controller="MainCtrl">

            <label ng-repeat="fruit in fruits">
                <input type="checkbox" name="fruitSelect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}}
            </label>
            <p>Services: {{fruits}}</p>
        </div>

        <script type="text/javaScript">

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

            app.controller('MainCtrl', function($scope) {
                $scope.fruits = fruitsObj;
            });

        </script>
    </body>
</html>

scniro · Accepted Answer · 2015-07-18 02:18:42Z

3

Simply the booleans should be true or false only rather than string 'true' or 'false'

Additionally there is not need of ng-checked directive. You also need to use {{index}} in form field so that it will become an unique element of form like by doing serviceSelect-{{$index}}

Markup

<input 
    type="checkbox" 
    name="serviceSelect-{{$index}}" 
    ng-model="fruit.selected" 
    ng-value="{{fruit.name}}" />

Demo Plunkr

edited Jul 18, 2015 at 2:18

scniro

17k8 gold badges67 silver badges108 bronze badges

answered Jul 1, 2015 at 21:36

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

angmerica Over a year ago

agreed. your model should equal fruit.selected and the data true/false should be booleans.

Raydot Over a year ago

I think a description of what {{$index}} is doing would improve the answer if you want to edit, but I've figured it out myself. Thanks!

Pankaj Parkar Over a year ago

@DaveKaye Apologize for the same..I forgot to add that description.Updated it..Glad to help you..Thanks :)

Johnny Ha · Accepted Answer · 2015-07-01 21:37:39Z

0

Checkbox for Angular is true or false. The code should be this:

<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">

answered Jul 1, 2015 at 21:37

Johnny Ha

6335 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular Checkboxes not Binding Properly

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related