如何使用选择框过滤AngularJs中的所有数据？

Question

我有一个选择框，我正在过滤表格。我希望当我选择“全部”时，我会看到没有过滤器的所有数据。

这是选择：

<select ng-options="o.id as o.name  for o in cities"
    class="form-control"
    name="cities"
ng-model="citiesFilter">
    <option value="">All</option>
</select>

以下是完整示例：JsFiddle

Answer 1

工作代码https://jsfiddle.net/dineshu07/uLavay1c/

使用filter : {city:citiesFilter|| undefined}显示所有

<tr ng-repeat="cust in customers | filter : {city:citiesFilter|| undefined}" >
          <td>{{ $index +1 }}</td>
          <td>{{ cust.fullname }}</td>
          <td>{{ cust.id_number }}</td>
          <td>{{ cust.phone }}</td>
          <td>{{ cust.email }}</td>

        </tr>

Answer 2

您可以使用其他答案中显示的方法。或者您可以使用ng-options实现相同的效果。在$scope.cities中添加第一个选项。设置默认模型值。

示例演示

＆＃13;

＆＃13;

app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.citiesFilter = '';
  $scope.cities = [{
      "id": '',
      "name": "All"
    },
    {
      "id": 1,
      "name": "Tel-Aviv"
    },
    {
      "id": 2,
      "name": "Haifa"
    },
    {
      "id": 3,
      "name": "Eilat"
    },
  ];

  $scope.labels = ["fullname",
    "id_number",
    "phone",
    "email",
    "city"
  ];

  $scope.customers = [{
      "fullname": "Freddie Mercury",
      "id_number": "123456789",
      "phone": "054874874",
      "email": "fred@gmail.com",
      "city": "3"
    },
    {
      "fullname": "Jim Morrison",
      "id_number": "123456789",
      "phone": "054874874",
      "email": "jim@gmail.com",
      "city": "2"
    },
    {
      "fullname": "David Bowie",
      "id_number": "123456789",
      "phone": "054874874",
      "email": "dave@gmail.com",
      "city": "1"
    },
    {
      "fullname": "Prince",
      "id_number": "123456789",
      "phone": "054874874",
      "email": "prince@gmail.com",
      "city": "1"
    }
  ];
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">

    <select ng-options="o.id as o.name  for o in cities" class="form-control" name="cities" ng-model="citiesFilter">
 	</select>

    <table class="table table-striped table-bordered table-hover">
      <thead>

        <tr>
          <th>#</th>
          <th ng-repeat="(key,label) in labels" sortable="key">

            {{ label }}
          </th>

        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="cust in customers | filter : {city:citiesFilter}">
          <td>{{ $index +1 }}</td>
          <td>{{ cust.fullname }}</td>
          <td>{{ cust.id_number }}</td>
          <td>{{ cust.phone }}</td>
          <td>{{ cust.email }}</td>
          <td>{{( cities | filter: {id:cust.city})[0].name }}</td>
        </tr>

      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以编写自定义过滤功能以进行特殊处理。这样您就可以获得更多控制权，并且可以添加所需的任何条件。

JSFiddle

$scope.myFilter = function(city) {
  return function(cust) {
    return !city || +cust.city === +city
  }
}

<tr ng-repeat="cust in customers | filter: myFilter(citiesFilter)">

Answer 4

我刚刚将您的过滤条件修改为 "ng-repeat="cust in customers | filter :(!!citiesFilter || undefined) && {city:citiesFilter}""

因为，如果过滤器表达式返回undefined，则过滤器将不会应用

＆＃13;

＆＃13;

app = angular.module("myApp",[]);

app.controller("myCtrl", function($scope){
	
  	$scope.cities = [
    {"id":1, "name": "Tel-Aviv"},
    {"id":2,  "name": "Haifa"},
    {"id":3,  "name": "Eilat"},
    ];
    
    	$scope.labels =  ["fullname",
					    "id_number",
					    "phone",
					    "email",
              "city"];

	$scope.customers = [
						{
							"fullname" : "Freddie Mercury",
							"id_number" : "123456789",
							"phone" : "054874874",
							"email" : "fred@gmail.com",
              "city" : "3"
						},
						{
							"fullname" : "Jim Morrison",
							"id_number" : "123456789",
							"phone" : "054874874",
							"email" : "jim@gmail.com",
              "city" : "2"
						},
						{
							"fullname" : "David Bowie",
							"id_number" : "123456789",
							"phone" : "054874874",
							"email" : "dave@gmail.com",
              "city" : "1"
						},
						{
							"fullname" : "Prince",
							"id_number" : "123456789",
							"phone" : "054874874",
							"email" : "prince@gmail.com",
              "city" : "1"
						}
						];
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
  
  	<select ng-options="o.id as o.name  for o in cities"
 		class="form-control"
 		name="cities"
 	ng-model="citiesFilter">
 		<option value="">All</option>
 	</select>

    <table class="table table-striped table-bordered table-hover" >
      <thead>

        <tr>
          <th>#</th>
          <th ng-repeat="(key,label) in labels"  sortable="key">
           
				{{ label }}
          </th>
         
        </tr>
      </thead>
      <tbody>
       <tr ng-repeat="cust in customers | filter :(!!citiesFilter || undefined) && {city:citiesFilter}" >
          <td>{{ $index +1 }}</td>
          <td>{{ cust.fullname }}</td>
          <td>{{ cust.id_number }}</td>
          <td>{{ cust.phone }}</td>
          <td>{{ cust.email }}</td>
          <td>{{( cities | filter: {id:cust.city})[0].name }}</td>
        </tr>

      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助