角度复选框绑定不正确

Angular Checkboxes not Binding Properly

本文关键字：不正确 绑定 复选框      更新时间：2023-09-26

解决此问题时遇到问题，该问题涉及从API生成的Angular复选框表单。

我可以创建复选框，但有两个问题：复选框的检查度与API中的值不匹配，当我单击复选框时，名称值会从默认值更改为"true"或"false"。我看到过其他类似的问题，但无法使其起作用。Plunk在这里和下面的源代码：

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

简单地说，布尔值应该仅为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

Angular的复选框为true或false。代码应该是这样的： 
<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">
相关文章：