Question

我试图实现这一点，当用户单击复选框时，它会显示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;
        }
    });
}

Answer 1

请改为尝试：

<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不为零，则会隐藏该行。

Answer 2

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

复选框

<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”过滤器。

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

坚持使用angularjs ng-checked

3 个答案: