angalrjs中的复选框绑定

Checkboxes binding in AngualrJS

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

我有两个复选框，一个有数据绑定，另一个没有数据绑定。如下面的代码所示:

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

当我点击'with data binding'复选框时，它应该绑定并反映当前状态标签中的值。但这并没有发生。为什么?。

我发现你的代码有两个问题:

  1. 你忘了ng-model
  2. 你应该为ng-true-value和ng-false-value指定一个常量，通过指定YES, angular将在作用域上查找YES属性，写'YES'代替

更新工作规划:

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

预览
<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>

编辑:正如@g00glen00b所提到的，在angular 1.3之前，ng-true-value只接受常量值，所以如果你不使用angular 1.3或更高版本，你不必把YES用引号括起来。

当您使用input[checkbox]指令时使用data-ng-true-value和data-ng-false-value，但它们确实需要ngModel，正如您在文档中看到的(注意ng-model不在方括号中)。

如果不提供模型，AngularJS就无法知道在哪里应用true/false值。添加data-ng-model似乎确实有效，正如您在下面的小提琴中看到的那样。

<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'" />

您没有将"data-ng-model"属性应用于复选框。请从下面替换您的"With binding"复选框代码:

<input type="checkbox" data-ng-model="sport.selected" data-ng-true-value="YES" data-ng-false-value="NO" >
相关文章：