卡在 angularjs ng-checked答案

【问题标题】：Stuck on angularjs ng-checked卡在 angularjs ng-checked
【发布时间】：2016-05-05 05:26:11
【问题描述】：

我正在尝试实现，当用户单击复选框时，它会在 ng-repeat 中显示数量为 0 的所有产品。否则，当复选框未选中所有项目显示时。目前我能够获得一半的功能。

复选框：

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-checked="vm.OnHandQty()">

表格

    <tr ng-repeat="item in vm.items | filter :search">                                           
        <td ng-bind="item.itemNo"> </td>
        <td ng-bind="item.description"></td>
        <td ng-bind="(item.listPrice | currency)"></td>
        <td ng-bind="item.onHandQty" ng-model="quantity"></td>
    </tr>

控制器

    vm.OnHandQty = function () {               
    $scope.search = {};

    vm.items.forEach(i => {
        if (i.onHandQty == 2) {
            console.log(i);
            $scope.search = i;
            return true;
        }
        else {
            $scope.search =i;
            return false;
        }
    });
}

【问题讨论】：

标签： angularjs angularjs-ng-repeat angular-filters

【解决方案1】：

我建议更改复选框和控制器的实现：

复选框

<input type="checkbox" ng-model="vm.checked" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">

- 在这里，我们使用“ng-model”而不是“ng-checked”，“vm.checked”是您定义为复选框的 ng-model 的变量。

控制器

$scope.search = function(item) {
    return ($scope.vm.checked) ? item.onHandQuantity === 0: true;
};

- 在这里，我们定义了您在表中使用的“ng-repeat”过滤器。

【讨论】：

这会删除选中的所有对象，取消选中会将它们放回原处
编辑了我的答案。我忘记在搜索功能中包含“项目”了

【解决方案2】：

试试这个：

<tr ng-repeat="item in vm.items" ng-show="onoffswitch==true && item.onHandQty != 0? false : true">
    <td ng-bind="item.itemNo"> </td>
    <td ng-bind="item.description"></td>
    <td ng-bind="(item.listPrice | currency)"></td>
    <td ng-bind="item.onHandQty" ng-model="quantity"></td>
</tr>

仅当onoffswitch 为真且onHandQty 为零时才会显示该行，否则将显示该行。因此，如果onoffswitch 为真且onHandQty 不为零，则该行将被隐藏。

【讨论】：

【解决方案3】：

您可以使用 ng-change 和 ng-model。

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-model="vm.checked" ng-change="checkBoxChange(vm.checked)">

然后，通过你的 checkBoxChange 函数，应用你的业务逻辑：

vm.checkBoxChange = function(checked){
   if(checked){
      //Do something
   }else{
     //Something else
    }
};

【讨论】：