Question

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

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

Answer 1

您的复选框需要具有ng-model的不同值。 ng-model是您对范围的看法。因此，在您的情况下，当您将一个复选框设置为true时，具有相同ng-model值的所有其他复选框将更新为true。这是Angular的双向数据绑定的神奇之处。

有关ng-model的详细信息，请参阅this post。

Answer 2

我不明白你的逻辑。你说

<p>Type a letter in the input field:</p>

和

基本上，编程都是关于过滤

但你正在使用复选框。理想情况下，您应该用

替换所有复选框

<input type="text" ng-model="alpha"/>

对吗？

单击一个复选框即可检查所有复选框

2 个答案: