Question

我在使用Angular

的复选框中遇到了一个奇怪的问题

我有类似

的东西

<div class="checkbox">
   <input type="checkbox" ng-model="checkAll"/> check all
</div>
<div class="checkbox" ng-repeat="item in items">
    <input type="checkbox" ng-model="selectedItem[item.id]" ng-checked="checkAll"/>    
    {{item.title}}
</div>

<button type="button" ng-click="click()"></button>

JS

$scope.selectedItem = [];
$scope.click = function(){
    console.log($scope.selectedItem) -> [356: true, 123: true] 
}

在我的console.log中，输出356:true和123:true。 356 and 124都是ID，但我不确定为什么它们都适用于每个ID。我希望得到

[356, 123]作为我的结果。我该怎么做？

谢谢！

Answer 1

以下Plunker应该解决您的问题。基本上，您尝试将整数传递给ng-model，希望它以某种方式绑定到具有该整数ID的项目。但是，这是不允许的。 AngularJS将传递给ng-model的值作为变量读取，并且由于JavaScript为loosely-typed，因此它会自动为其指定"truthy"值，因为您没有明确预先定义它。 / p>

这就是您获得365: true和123: true而不是[365, 123]的原因。

Plunker

下面的代码修改了检查所有复选框的方式：它使用ng-checked而不是使用ng-clicked，并循环遍历$scope.items数组以查找带有{的项目{1}} isChecked的值。我意识到这在效率上是一个倒退，但权衡的是它很容易让每个复选框都有$scope.checked自己的truthy / falsy变量来指示它是否被检查。

如果你想保留你的原件＆＃34; checkAll＆＃34;使用ng-model的功能，您必须找到一种方法，为每个复选框ng-checked值动态创建变量，同时使其与ng-model协调一致。这是我想到的第一种方法，我知道它可以改进，但这应该让你开始。

<强> HTML：

ng-checked

<强> JS：

<body ng-app="app">
    <div ng-controller="test">
        <div class="checkbox">
        <input type="checkbox" ng-model="checked" ng-click="checkAll(checked)" /> check all
        </div>
        <div class="checkbox" ng-repeat="item in items">
            <input type="checkbox" ng-model="item.isChecked" />    
            {{item.title}}
        </div>
        <button type="button" ng-click="click()">Click me</button>
    </div>
</body>

我的应用程序中的奇怪复选框问题

1 个答案:

Plunker