Question

我的目标是首先显示所有项目，然后根据切换的不同属性隐藏/显示它们。我不想真正链接过滤器，因为我只想隐藏/显示具有匹配属性的项目。我有4个按钮来处理要过滤的整体属性。我已经尝试了各种迭代，但它从未证明是非常正确的。我错过了什么？

$ scope.radioModel = {“isBoat”：“1”，“isHome”：“1”，“isCar”：“1”， “hasEngine”：“1”};

<button ng-click="update('isBoat')">Is a boat</button>
<button ng-click="update('isCar')">Is a car</button>
<button ng-click="update('hasEngine')">Has an engine</button>
<button ng-click="update('isHome')">Is a home</button>

$scope.update = function(key) {
    if($scope.radioModel[key] == '1') { 
        $scope.radioModel[key] = '0';
    }
    else {
        $scope.radioModel[key] = '1';
    }
};

$scope.items = [
    { "personid": 1, "itemName": "Car 1", "isCar": "1", "isBoat": "0", "isHome": "0", "hasEngine": "1" },
    { "personid": 2, "itemName": "Home 1", "isCar": "0", "isBoat": "0", "isHome": "1", "hasEngine": "0" },
    { "personid": 3, "itemName": "Car 2", "isCar": "1", "isBoat": "0", "isHome": "0", "hasEngine": "1" },
    { "personid": 1, "itemName": "Boat 1", "isCar": "0", "isBoat": "1", "isHome": "0", "hasEngine": "1" }
]

//根据匹配的属性显示/隐藏项目 //每个项目都可以有多个属性为真

<div ng-repeat="(key,value) in items | groupBy: 'personid'">
    <div ng-repeat="(k,v) in value">
        {{v.itemName}}
    </div>
</div>

因此，如果hasEngine为true，那么将显示isEngine的所有项目。

如果isCar，hasEngine和isHome设置为true，则显示汽车，引擎或家中的项目

Answer 1

您可以使用自定义过滤器来过滤radioModel

的数据

向控制器添加自定义过滤器

 $scope.sampleFilter = function (item) {
      if(item.isCar == $scope.radioModel.isCar && item.isHome == $scope.radioModel.isHome && item.isBoat == $scope.radioModel.isBoat && item.hasEngine == $scope.radioModel.hasEngine){
        return true;
      }
      else
        return false;
  };

并将过滤器添加到ng-repeat

<div ng-repeat="item in items | filter:sampleFilter">
    {{item.personid}}-{{item.itemName}}-{{item.isBoat}}-{{item.isCar}}-{{item.hasEngine}}-{{item.isHome}}
</div>

<强> Demo

根据切换的值显示/隐藏项目

1 个答案: