Angular JS:使用文本框和Checkbox过滤

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将显示但是如果我要检查x复选框只有 Bryan应该显示.

提前致谢.

Answer 1

您将使用过滤器来完成此任务.

请参阅小提琴:http://jsfiddle.net/w4XqV/16/

标记:

<div ng-app="app" ng-controller="mainCtrl">
    <div>Search by Name: <input type="text" ng-model="filters.search"></div>
       <div>Show only Company X: <input type="checkbox" ng-model="filters.x" ng-change="actions.updateCompany()"/>           
       </div>
       <div ng-repeat="arr in array | filter:filters.search | filter:{company: filters.company}">
           <span ng-bind="arr.name"></span>
       </div>
</div>

JavaScript的:

var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
    $scope.filters = {
        x: false,
        company: '',
        search: ''
    };

    $scope.actions = {
        updateCompany: function () {
            if($scope.filters.x) {
                $scope.filters.company = 'x';
            } else {
                 $scope.filters.company = '';   
            }
        }
    };


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

希望这可以帮助.