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 <相关的行/ strong>如果我要取消选中该复选框并输入 br ， Brian 和 Brad 会显示但是如果我要去选中仅 Bryan 应显示的x复选框。如果我要删除/删除 br 并检查 x 和 y ，则应显示所有相关数据。（Tobias，Jeff，Brian，Igor和Brad）。

尊敬你的。

Answer 1

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

$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

Answer 2

您可以使用自定义过滤器完成此操作。

这里是小提琴：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;
  };
});

希望这有帮助。

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

2 个答案:

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