Question

嘿guyz我遇到与html中的复选框相关的问题，我正在使用angularjs。每当我选中一个复选框时，其他复选框都会被选中，反之亦然。这是我的Html代码。

<form ng-show='MyForm'>
<div ng-controller="MyController">
<div name="sampleName"  ng-repeat="sample in list" >
 <input ng-model="q.sample" type="checkbox" >{{sample.name}}</label>
</div>
</div>
 <button ng-click="submitForm()" >Submit</button>
 <button ng-click="cancelForm()">Cancel</button>
</form>

但是如果我只使用$ scope.sample而不是使用范围变量名称＆＃39; q.sample＆＃39;那么它可以正常工作。还有另外一个问题，在提交数据时我的表单被关闭，但是当我再次打开它时，它显示我的新表单，没有选中字段，但是如果我取消表单而不是使用选中的值提交表单再次打开它，我不希望检查值存在但我得到检查值而不是新的形式。我试图在取消按钮的复选框字段中使值为false。请参阅我的cancelForm代码（）

$scope.cancelForm = function() {
    $scope.MyForm = false
    $scope.q.sample = false
}

所以基本上，我有两个问题，一个是为什么我在选择时只选中一个复选框选中所有复选框

$scope.q.sample

第二次，当我只使用

时

$scope.sample

示例的范围值没有反映在UI上虽然它反映在JS中，但我得到了选中的复选框。

Answer 1

这是因为您将ng-model绑定到同一个控制器属性：

ng-model="q.sample"

相反，如果您想单独选择每个复选框，则需要为每个复选框添加不同的ng-model。

目前，您正在更改q.sample，然后将q.sample的值绑定到定义ng-model="q.sample"的所有其他复选框。

尝试这样的事情：

<div name="sampleName"  ng-repeat="item in list" >
    <input ng-model="item.checked" type="checkbox" >{{sample.name}}</label>
</div>

然后在cancelForm()：

$scope.cancelForm = function() {
    $scope.MyForm = false

    angular.forEach($scope.list, function(item) {
        item.checked = false;
    });
}

Answer 2

正如David Tryon提到的那样，你正在为所有复选框分配相同的ng模型，你想要的是每个复选框的不同ng模型。

您可以通过将javascript表达式分配给ng-model

来解决此问题

例如：

ng-model="list[$index].checked"

为什么在Angularjs中选择一个复选框，所有复选框都被选中？

2 个答案: