角度复选框未正确绑定答案

【问题标题】：Angular Checkboxes not Binding Properly角度复选框未正确绑定
【发布时间】：2015-07-18 10:18:42
【问题描述】：

无法解决这个涉及从 API 生成的 Angular 复选框表单的问题。

我可以创建一个复选框，但有两个问题：复选框的选中状态与来自 API 的值不匹配，并且当我单击复选框时，名称值从其默认值更改为“true”或“false”。 "已经看到其他类似的问题，但无法使其正常工作。 Plunk here 及源码如下：

<!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>

【问题讨论】：

标签： javascript angularjs checkbox angularjs-controller angularjs-forms

【解决方案1】：

布尔值应该是 true 或 false 而不是字符串 'true' 或 'false'

另外不需要ng-checked 指令。您还需要在表单字段中使用{{index}}，这样它就会成为表单的唯一元素，就像通过serviceSelect-{{$index}}进行操作一样

标记

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

Demo Plunkr

【讨论】：

同意。你的模型应该等于fruit.selected，数据真/假应该是布尔值。
如果您想编辑，我认为对 {{$index}} 正在做什么的描述会改善答案，但我自己已经弄清楚了。谢谢！
@DaveKaye 为同样的事情道歉..我忘了添加那个描述。更新了它..很高兴帮助你..谢谢:)

【解决方案2】：

Angular 的复选框是真还是假。代码应该是这样的：

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

【讨论】：