Question

我有一个循环，提供一组复选框，默认情况下按预期响应。我现在需要限制在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 {
}

JS

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);
            }

    };

Answer 1

您可以简单地将ng-repeat的输出限制为所需的值。

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

Answer 2

正如我在评论中所写，你需要做类似的事情：

  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;
}

Answer 3

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

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

具有迭代的角动态复选框

3 个答案: