我有一个带有复选框输入的对象表.如果选中了对象的复选框,则object.isChecked值将设置为true,如果未选中,则将该值设置为false.但是,我有一个master复选框,用于检查/取消选中表中的所有复选框.但是,这不会更新object.isChecked值.如何让master复选框更改object.isChecked值？
解决方法
问题必须是你不在Angular内触发复选框.如果你想让Angular魔法工作 – 你必须在Angular范围内进行所有的模型操作.我创建了
a plunker to demonstrate.：
的index.html
<!DOCTYPE html>
<html data-ng-app="demo">
<head>
<script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script data-require="angular.js@*" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="DemoController">
<div data-ng-repeat="object in objects">
{{object.name}}: <input type="checkBox" data-ng-model="object.isChecked">
</div>
Master: <input type="checkBox" data-ng-click="triggerAll()">
{{objects}}
</body>
</html>
的script.js
"use strict";
var demo = angular.module("demo",[]);
function DemoController($scope) {
$scope.objects = [
{
name : "First",isChecked : true
},{
name : "Second",isChecked : false
}
]
$scope.triggerAll = function(){
angular.forEach($scope.objects,function(value){
value.isChecked = !value.isChecked;
})
}
}
注意触发所有复选框都是使用ngClick完成的,而不是通常的onClick或jQuery处理程序.这允许Angular运行脏检查并且行为正确.
