带有迭代的角度动态复选框答案

【问题标题】：Angular dynamic checkboxes with iteration带有迭代的角度动态复选框
【发布时间】：2018-01-17 02:56:42
【问题描述】：

我有一个循环传递一组复选框，默认情况下会按预期响应。我现在需要将可以检查的最大值限制为 8（并保留所有复选框）。

我正在尝试将ng-model（并尝试ng-if）添加到下面的类中，但行为不正确。

HTML

<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations">
  <div class="Checkbox">
    <input type="checkbox" ng-click="vm.updateCart(np)"/>
      <div class="Checkbox-visible" model="!vm.overEightCorporations">

CSS

> input:checked + .Checkbox-visible {
    background: #000 url('../images/CheckMark_White.png') center/20px 20px no-repeat;
}

> input:focus + .Checkbox-visible {
}

vm.overEightCorporations = function () {

        if ($rootScope.cart.length > 7){
            return true;
            toastr.error('You can only set 8 corporations at a time.');
        }
        return false;
        }
    };

编辑：

响应后的附加 JS

       vm.updateCart = function (corporation) {

            var i = vm.inCart(corporation.id);
            if (i < 0) {
                $rootScope.cart.push(corporation);
            } else {
                $rootScope.cart.splice(i, 1);
            }

    };

【问题讨论】：

如果你不想限制你的 ng-repeat 你可以添加检查逻辑到 updateCart 方法。因此，如果用户尝试添加超过 8 个，您将只显示 toast 而不会向数组添加新项目。
谢谢@laroslav。我尝试修改 updateCart 方法并将在此处包含该方法。似乎该方法只是由于复选框而发生的一个动作。该方法本身对 UI 没有任何作用，所以我还没有找到一种方法来修改它以影响复选框中的检查。
如果添加了 8 个项目，您要隐藏所有复选框还是禁用它们？我不确定我是否正确理解了您的任务。如果是这样，您可以添加一个变量（不是函数） vm.overEightCorporations = false;然后检查 updateCart 如果项目超过 8 并设置 vm.overEightCorporations = true 在 HTML 中，您可以在需要的地方使用 ng-hide="vm.overEightCorporations "。
我想禁用复选框。我希望所有复选框始终可见。当用户点击 8 时，我希望他们无法再查看。
然后你可以使用 ng-disabled="vm.overEightCorporations" 和我在下面描述的其余逻辑。

标签： html css angularjs checkbox iteration

【解决方案1】：

您可以简单地将您的ng-repeats 输出限制为您想要的值。

<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations | limitTo: 8">
  ...
</div>

【讨论】：

我应该更具体一些。将更新问题。我想限制选中框的数量，而不是框本身的总数。

【解决方案2】：

正如我在 cmets 中所写，您需要做类似的事情：

  vm.updateCart = function (corporation) {
        var i = vm.inCart(corporation.id);
        if (i < 0) {
            $rootScope.cart.push(corporation);
        } else {
            $rootScope.cart.splice(i, 1);
        }

        // if you want to show error message you can do it here
        vm.overEightCorporations = $rootScope.cart.length > 7;

};

HTML：

<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations">
  <div class="Checkbox">
    <input type="checkbox" ng-click="vm.updateCart(np)" ng-class="{ 'checkbox-invisible': vm.overEightCorporations }"/>
      <div class="Checkbox-visible">

CSS：

input[type="checkbox"]:not(:checked) + .checkbox-invisible {
     display:none;
}

【讨论】：

这是一个优雅的解决方案，但不会提供预期的行为。用户确实需要能够取消选中复选框，因此只有在未选中的框被禁用而选中的框没有被禁用时，禁用才会起作用。
我已经更新了我的答案。为此，您可以尝试使用 CSS。因此，如果选择了 8，则需要将“复选框不可见”类添加到复选框。 CSS 类应该检查它是否是未经检查的输入，如果是则隐藏它。我不确定我的 CSS 的正确性，这只是一个大概的想法。

【解决方案3】：

通过向我的数据对象附加“已检查”布尔值来解决。必须在实例化时附加对象，然后在整个代码中的多个位置修改它以使其保持最新。问题一直存在，直到我将 ng-click 更新为 ng-change，这显然更适用于 ng-model。然后，我只需通过选中的布尔值设置复选标记：

 <input type="checkbox" ng-change="vm.updateCart(np)" ng-model="np.checked"/>

【讨论】：