gpt4 book ai didi

javascript - AngularJS 中的复选框绑定(bind)

转载 作者:行者123 更新时间:2023-11-30 16:43:20 24 4
gpt4 key购买 nike

我有两个复选框,一个带有数据绑定(bind),另一个没有数据绑定(bind)。正如您在下面的代码中看到的那样。

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

当我单击“使用数据绑定(bind)”复选框时,它应该绑定(bind)并反射(reflect)当前状态标签中的值。但它没有发生。为什么?请有人帮忙。

最佳答案

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

  1. 你忘记了 ng-model
  2. 您应该为 ng-true-valueng-false-value 指定一个常量,通过指定 YES angular 将寻找一个YES 属性,改为写 'YES'

更新的工作计划:

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>

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

关于javascript - AngularJS 中的复选框绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31608006/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com