单击单个复选框，将选中所有复选框

debugcn 发表于 Dev

Pooja Nagaraj Rao

我的angularjs代码中有一个复选框列表。当我单击一个复选框时，所有复选框都被激活。如何只检查一个复选框？

这是我的代码

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Type a letter in the input field:</p>
<form action="">
<p><input type="checkbox" ng-model="alpha" value="a">a</p>
<p><input type="checkbox" ng-model="alpha" value="b">b</p>
<p><input type="checkbox" ng-model="alpha" value="c">c</p>
<p><input type="checkbox" ng-model="alpha" value="d">d</p>
<p><input type="checkbox" ng-model="alpha" value="e">e</p>
<p><input type="checkbox" ng-model="alpha" value="f">f</p>
</form>
<ul>
  <li ng-repeat="x in names | filter:alpha">
    {{ x }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

<p>The list will only consists of names matching the filter.</p>


</body>
</html>

当我使用单选按钮时，代码工作正常。这是我面临的问题

向导

您的复选框需要为设置不同的值ng-model。ng-model是将您的视图绑定到您的范围的原因。因此，在您的情况下，将一个复选框设置为时true，所有其他具有相同ng-model值的复选框都将更新为true。这是Angular双向数据绑定的魔力。