Question

我有两个复选框，一个带有数据绑定，另一个没有数据绑定。您可以在下面的代码中看到。

<html ng-app="notesApp">
    <head><title>Notes App</title></head>
    <body ng-controller="MainCtrl as ctrl">
        <div>
            <h2>What are your favorite sports?</h2>
            <div ng-repeat="sport in ctrl.sports">
                <label ng-bind="sport.label"></label>
                <div>
                    With Binding:
                    <input type="checkbox"  data-ng-true-value="YES" data-ng-false-value="NO" >
                </div>
                <div>
                    Using ng-checked:
                    <input type="checkbox" data-ng-checked='sport.selected === "YES"'>

                </div>
                <div>
                    Current state : {{sport.selected}}
                </div>

            </div>

        </div>

        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript">
        angular.module('notesApp',[])
            .controller('MainCtrl',[function(){
                var self = this;
                self.sports = [
                    {label:'Basketball',selected: 'YES'},
                    {label:'Cricket',selected:'NO'},
                    {label:'Soccer',selected:'NO'},
                    {label:'Swimming',selected:'YES'}
                ];

            }]);

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

当我点击“带数据绑定”的复选框时，它应该绑定并反映当前状态标签中的值。但它没有发生。为什么？。可以有人帮助请。

Answer 1

data-ng-true-value和data-ng-false-value在您使用input[checkbox]指令时使用，但它们确实需要ngModel，您可以在{{{ 3}}（请注意，ng-model不在方括号中。）

如果不提供模型，AngularJS无法知道将true / false值应用于何处。添加data-ng-model似乎确实有效，您可以在以下docs中看到。

<input type="checkbox" ng-model="sport.selected"
    data-ng-true-value="YES"
    data-ng-false-value="NO" />

另外，请注意，使用AngularJS 1.3或更高版本时，ng-true-value和ng-false-value的值应该是表达式而不是常量值。这意味着对于AngularJS 1.3及更高版本，您必须将其替换为ng-true-value="'YES'"，例如：

<input type="checkbox" ng-model="sport.selected"
    data-ng-true-value="'YES'"
    data-ng-false-value="'NO'" />

Answer 2

我在您的代码中发现了2个问题：

您忘记了ng-model
您应为ng-true-value和ng-false-value指定一个常量，通过指定YES angular将在范围内查找YES属性，而不是'YES'

更新了工作plnkr：

http://plnkr.co/edit/rnYRUpIICC7HAKdKXf3i?p=preview

<html ng-app="notesApp">

<head>
    <title>Notes App</title>
</head>

<body ng-controller="MainCtrl as ctrl">
<div>
    <h2>What are your favorite sports?</h2>
    <div ng-repeat="sport in ctrl.sports">
        <label ng-bind="sport.label"></label>
        <div>
            With Binding:
            <input type="checkbox" ng-model="sport.selected" data-ng-true-value="'YES'" data-ng-false-value="'NO'" />
        </div>
        <div>
            Using ng-checked:
            <input type="checkbox" data-ng-checked="sport.selected === 'YES'" />
        </div>
        <div>
            Current state : {{sport.selected}}
        </div>
    </div>
</div>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script type="text/javascript">
    angular.module('notesApp',[])
            .controller('MainCtrl',[function(){
                var self = this;
                self.sports = [
                    {label:'Basketball',selected: 'YES'},
                    {label:'Cricket',selected:'NO'},
                    {label:'Soccer',selected:'NO'},
                    {label:'Swimming',selected:'YES'}
                ];

            }]);

</script>
</body>

</html>

ng-true-value

Answer 3

您未申请＆＃34;数据-ng-model＆＃34;属性到复选框。请更换您的＆＃34; With binding＆＃34;从下面复选框代码：

<input type="checkbox" data-ng-model="sport.selected" data-ng-true-value="YES" data-ng-false-value="NO" >

AngualrJS中的复选框绑定

3 个答案: