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

Question

I'm new in angularJS, I just want to filter my data using checkbox and textbox but I have no Idea how to do it. Please Help me.

Here is my data:

  $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'}
  ];

All I want is if I going to choose x from checkbox it will show the rows related with Tobias Jeff Brian and if I'm going to uncheck the checkbox and type br , Brian and Brad will show but if I'm going to check the x checkbox only Bryan should show. if I'm going to remove/erase the br and check both x and y all the related data should show. (Tobias, Jeff, Brian, Igor and Brad).

Respectfully Yours.

Answer 1

You can write custom filter function. Check it out.

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

Usage:

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

Demo: http://plnkr.co/edit/oqe5ADcE1t3OOoePE1oK?p=preview

Answer 2

Hi this could be done using a custom filter.

Here's the fiddle: http://jsfiddle.net/w4XqV/27/

Markup:

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

Hope this helps.