Angular JS：使用文本框和复选框的过滤器

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从复选框，它会显示与托比亚斯相关杰夫布莱恩行，如果我米去取消复选框和类型br，布赖恩和布拉德将显示，但如果我要检查x复选框只有布赖恩应该显示。

在此先感谢。

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

希望这有助于。

Answer 2

<div ng-controller="ctrl2"> 
<div> 
    <input type="text" ng-model="myfilter" placeholder="filter"> 
    <br>avilable:<input type="checkbox" ng-model="check" checked value="avilable"> 
    <br> 
    <span ng-click="sortby('name')">name</span><span ng-click="sortby('country')">country</span> 
</div> 
<p></p> 
<div class="row1" ng-repeat="x in names | orderBy:myorder | filter:check | filter:myfilter"> 
    <span class="row2"> 
    {{x.name}} 
</span> 
    <span class="row2"> 
    {{x.country}} 
</span> 
</div> 
<h1>{{myfilter}}</h1> 

Answer 3

app.controller('ctrl2', function ($scope) { 
$scope.sortby = function (x) { 
    $scope.myorder = x; 
} 

$scope.names = [ 
    { name: 'Jani', country: 'Norway', available: true }, 
    { name: 'Carl', country: 'Sweden', available: false }, 
    { name: 'Margareth', country: 'England', available: true }, 
    { name: 'Hege', country: 'Norway', available: true }, 
    { name: 'Joe', country: 'Denmark', available: false }, 
    { name: 'Gustav', country: 'Sweden', available: false }, 
    { name: 'Birgit', country: 'Denmark', available: false }, 
    { name: 'Mary', country: 'England', available: true }, 
    { name: 'Kai', country: 'Norway', available: false } 
]; 

}）;