角度选择过滤器显示全部

时间:2015-05-19 16:21:41

标签: javascript angularjs filter

说我有以下ng-repeat

  <li class="list-group-item" ng-repeat="user in users | filter:search:strict">

为此我有一个看起来像这样的选择:

    <select class="form-control"
        ng-model="search.title.name"
        ng-options="item.name as item.name for item in titles">
    <option value="">Vælg jobprofil</option>
</select>

现在这可行但是当我选择Vælg jobprofil选项时,所有内容都会被移除,因为它会搜索类似""的名称,所以我的问题是如何为选择添加all选项过滤

1 个答案:

答案 0 :(得分:1)

不要将All保留为默认选项,而是将其作为标题列表的一部分并绑定到value属性。删除“全部”选项的value属性。

实施例: -

$scope.titles = [{
    name: 'All'
  }, {
    name: 'A',
    value: 'A'
  }, {
    name: 'B',
    value: 'B'
  }, {
    name: 'C',
    value: 'C'
  }, {
    name: 'D',
    value: 'D'
  }];

<select class="form-control" ng-model="search.title.name" ng-options="item.value as item.name for item in titles">

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.titles = [{
    name: 'All'
    
  }, {
    name: 'A',
    value: 'A'
  }, {
    name: 'B',
    value: 'B'
  }, {
    name: 'C',
    value: 'C'
  }, {
    name: 'D',
    value: 'D'
  }]
  $scope.users = [{
    name: 'Aasd'
  }, {
    name: 'Bsd'
  }, {
    name: 'Csd'
  }, {
    name: 'Dsd'
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li class="list-group-item" ng-repeat="user in users | filter:search:strict">{{user.name}}</li>
  </ul>

  <select class="form-control" ng-model="search.name" ng-options="item.value as item.name for item in titles">
  </select>
</div>