AngularJS - 使用复选框和文本框过滤数据

Question

我是 angularJS 的新手，我只想使用复选框和文本框过滤我的数据，但我不知道该怎么做。请帮帮我。

这是我的数据：

  $scope.array = [
    {name: 'Tobias', lname: 'TLname', company: 'x'},
    {name: 'Jeff', lname: 'JLname', company: 'x'},
    {name: 'Brian', lname: 'BLname', company: 'x'},
    {name: 'Igor', lname: 'ILname', company: 'y'},
    {name: 'James', lname: 'JLname', company: 'z'},
    {name: 'Brad', lname: 'BLname', company: 'y'}
  ];

我想要的是，如果我要从复选框中选择 x，它将显示与 Tobias Jeff Brian 如果我要取消选中复选框并键入 br，Brian 和 Brad 将显示，但如果我要选中只有 Bryan 应该显示的 x 复选框。如果我要删除/删除 br 并检查 x 和 y 所有相关数据应显示。 （Tobias、Jeff、Brian、Igor 和 Brad）。

尊敬的您。

Answer 1

您好，这可以使用自定义过滤器来完成。

这是小提琴：http://jsfiddle.net/w4XqV/27/

标记：

<div ng-app="app" ng-controller="mainCtrl">
    <div>Search by Name: <input type="text" ng-model="filters.search"></div>
       <div>Show Company X: <input type="checkbox" ng-model="companyFilters.x"/></div>
       <div>Show Company Y: <input type="checkbox" ng-model="companyFilters.y"/></div>
       <div>Show Company Z: <input type="checkbox" ng-model="companyFilters.z"/></div>
       <div ng-repeat="arr in array | filter:filters.search | customFilter:companyFilters">
           <span ng-bind="arr.name"></span>
       </div>
</div>

JavaScript：

var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
    $scope.companyFilters = {
        x: false,
        y: false,
        z: false
    };

    $scope.filters = {
        search: ''
    };

    $scope.array = [
    {name: 'Tobias', lname: 'TLname', company: 'x'},
    {name: 'Jeff', lname: 'JLname', company: 'x'},
    {name: 'Brian', lname: 'BLname', company: 'x'},
    {name: 'Igor', lname: 'ILname', company: 'y'},
    {name: 'James', lname: 'JLname', company: 'z'},
    {name: 'Brad', lname: 'BLname', company: 'y'}
  ];
})
.filter('customFilter', function() {
  return function(input, companies) {

      console.log(input);
      consoloe.log(companies);
      var filteredList = [];

      for(var i = 0; i < input.length; i ++) {
          for(var c = 0; c < companies.length; c ++) {
              console.log(input[i].company);
              console.log(companies[i]);
              if(input[i].company === companies[c]) {
                  filteredList.push(input[i]);
                  break;
              }
          }
      }
      console.log(filteredList);
      return filteredList;
  };
});

希望这会有所帮助。

Answer 2

您可以编写自定义过滤功能。看看吧。

$scope.filterUsers = function (user) {

    var result = true,
        filters = $scope.filterBy,
        condition = $scope.filter;

    for (key in filters) {
        if (filters[key]) {
            if (user[key].indexOf(condition) !== -1) {
                return true;
            }
            else result = false;
        }
    }

    return result;
};

用法：

<li ng-repeat="user in array | filter:filterUsers">{{user.name}} {{user.lname}},   {{user.company}}</li>

演示：http://plnkr.co/edit/oqe5ADcE1t3OOoePE1oK?p=preview