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 会显示但是如果我要去选中 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'}
  ];
});

希望这有帮助。

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

}）;

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

3 个答案: