Question

我需要一些角度滤镜的帮助。我需要在一个字段中按多个值过滤数组。

Array看起来像这样：

$scope.items = [{
  "item": "one",
  "tags": "2,5"
}, {
  "item": "two",
  "tags": "3,4,6,7"
}, {
  "item": "three",
  "tags": "1,3,5"
}];

我想按照逗号分隔的标签搜索项目。

示例：在搜索字段中用逗号分隔的用户输入标签（或按复选框选择）并选择标签1和3.如何列出包含这些标签的所有项目？在这个例子中的第二和第三项。

Plunker

https://plnkr.co/edit/6SidABYsjtrjtH3xqusA?p=preview

Answer 1

  <table>
     <tr>
        <td align="right">Search :</td>
        <td><input ng-model="query" /></td>
     </tr>
     <tr>
        <td align="right">Search By :</td>
        <td>
           <select ng-model="query">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
           </select>
        </td>
     </tr>
  </table>
  <hr>
  <div>
     <table>
        <tr ng-repeat="item in items | filter:query">
           <td>{{item.item}}</td>
        </tr>
     </table>



  var employeeApp = angular.module("EmployeeApp",[]);
  employeeApp.controller("empCtrl",function($scope){

    $scope.items = [{
      "item": "one",
      "tags": "2,5"
    }, {
      "item": "two",
      "tags": "3,4,6,7"
    }, {
      "item": "three",
      "tags": "1,3,5"
    }];
    $scope.orderProp="";                
  });

Answer 2

以下是使用复选框所需的答案。

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.items = [{
      "name": "one",
      "tags": "2,5"
    }, {
      "name": "two",
      "tags": "3,4,6,7"
    }, {
      "name": "three",
      "tags": "1,3,5"
    }];

    $scope.items_dup = $scope.items
    // checkbox selection
    $scope.selection = [];
    $scope.toggleSelection = function toggleSelection(filter) {
      var idx = $scope.selection.indexOf(filter);
      if (idx > -1) {
        $scope.selection.splice(idx, 1);
      } else {
        $scope.selection.push(filter);
      }
    };

    // filter list
    $scope.filter = function() {
      filterTag($scope.selection,$scope.items);
      function filterTag(selected,items){
        var out = [];
        angular.forEach(items, function(value, key) {
          angular.forEach(selected, function(inner_value, key) {
            if(value.tags.split(',').indexOf(inner_value.toString()) > -1)
            {
              if(out.indexOf(value) == -1)
              {
                out.push(value)
              }
            }
          })
        })
        if(out.length > 0)
        {
          $scope.items_dup = out;
        }
        else
        {
          $scope.items_dup = $scope.items;   
        }
      }
      
    };
  })

<!DOCTYPE html>
<html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="app">
  <div ng-controller="Controller">
    <h1>Tag filter!</h1>
    <li ng-repeat="item in items_dup">
      {{item.name}}
    </li>
    <hr>
    <p>Select filter</p>
    <label>
      <input type="checkbox" value="1" ng-click="toggleSelection(1)"> 1
    </label>
    <br>
    <label>
      <input type="checkbox" value="2" ng-click="toggleSelection(2)"> 2
    </label><br>
    <label>
      <input type="checkbox" value="3" ng-click="toggleSelection(3)"> 3
    </label>
    <br><br>
    <button ng-click="filter()">Filter list</button>
  </div>
</body>

</html>

请运行代码段并检查。

Here is the plunker

角度“多重”值过滤器

2 个答案: