使用通过 angularJS 中的对象属性创建的 select 过滤 table 中的结果

Question

我正在尝试创建一个过滤器，它将根据下拉列表中 selected 的值过滤掉 table 中的结果。目前，它适用于除 'type'.

之外的所有下拉菜单

'type' 下拉列表是使用对象数组的独特属性创建的。所以，现在，它包含两个值 'Internal' 和 'External'.

根据我 select 的值，它应该只显示 table 中筛选的结果。但截至目前，它只是显示空白。

我该如何解决这个问题？

代码如下：

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
 $scope.loc = {
  Sydney: 4,
  Toronto: 7,
  London: 3,
  Berlin: 7
 };
 
 $scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
 $scope.items = [{
  name: 'ABC',
  type: 'INTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  type: 'EXTERNAL',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'CDE',
  type: 'INTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  type: 'EXTERNAL',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'DEF',
  type: 'INTERNAL',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'CDE',
  type: 'EXTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  type: 'INTERNAL',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'ABC',
  type: 'EXTERNAL',
  countryName: 'United Kingdom',
  city: 'London'
 }, {
  name: 'ABC',
  type: 'INTERNAL',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'DEF',
  type: 'EXTERNAL',
  countryName: 'Canada',
  city: 'Toronto'
 }, {
  name: 'DEF',
  type: 'INTERNAL',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'BCD',
  type: 'EXTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  type: 'INTERNAL',
  countryName: 'Canada',
  city: 'Toronto'
 }];
 
 $scope.changeFilter = function() {
  $scope.my.countryName = $scope.my.countryName || undefined;
  $scope.my.city = $scope.my.city || undefined;
  $scope.my.type = $scope.my.type || undefined;
 };
}]);

app.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
 <div class="row">
   <div class="col-md-3">
  <label>Search Keyword:</label>
  <input type="text" class="form-control" ng-model="my.$"/>
   </div>
   <div class="col-md-3">
  <label>Country:</label>
  <select class="form-control" ng-model="my.countryName" ng-options="ctry for ctry in country" ng-change="changeFilter()">
    <option value="">Select a country</option>
  </select>
   </div>
   <div class="col-md-3">
  <label>City</label>
  <select class="form-control" ng-model="my.city" ng-options="key as key for (key, value) in loc" ng-change="changeFilter()">
    <option value="">Select a city</option>
  </select>
   </div>    
   <div class="col-md-3">
  <label>Type:</label>
  <select class="form-control" ng-model="my.type" ng-options="item.type for item in items | unique:'type'" ng-change="changeFilter()">
    <option value="">Select a type</option>
  </select>
   </div>
 </div>
 <hr />
 <div class="row">
   <table class="table table-bordered">
  <tr>
    <th>Name</th>
    <th>Country</th>
    <th>City</th>
  </tr>
  <tr ng-repeat="item in items | filter: my">
    <td>{{item.name}}</td>
    <td>{{item.countryName}}</td>
    <td>{{item.city}}</td>
  </tr>
   </table>
 </div>
  </div>
</div>

Answer 1

 var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
 $scope.loc = {
  Sydney: 4,
  Toronto: 7,
  London: 3,
  Berlin: 7
 };

 $scope.locData = {
  INTERNAL: 1,
  EXTERNAL: 2
 };
 
 $scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
 $scope.fullData = [{
  name: 'ABC',
  type: 'INTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  type: 'EXTERNAL',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'CDE',
  type: 'INTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  type: 'EXTERNAL',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'DEF',
  type: 'INTERNAL',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'CDE',
  type: 'EXTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'BCD',
  type: 'INTERNAL',
  countryName: 'Australia',
  city: 'Sydney'
 }, {
  name: 'ABC',
  type: 'EXTERNAL',
  countryName: 'United Kingdom',
  city: 'London'
 }, {
  name: 'ABC',
  type: 'INTERNAL',
  countryName: 'China',
  city: 'Shanghai'
 }, {
  name: 'DEF',
  type: 'EXTERNAL',
  countryName: 'Canada',
  city: 'Toronto'
 }, {
  name: 'DEF',
  type: 'INTERNAL',
  countryName: 'India',
  city: 'Bangalore'
 }, {
  name: 'BCD',
  type: 'EXTERNAL',
  countryName: 'Germany',
  city: 'Berlin'
 }, {
  name: 'ABC',
  type: 'INTERNAL',
  countryName: 'Canada',
  city: 'Toronto'
 }];
 
 $scope.changeFilter = function() {
   $scope.my.countryName = $scope.my.countryName || undefined;
   $scope.my.city = $scope.my.city || undefined;
   $scope.my.type = $scope.my.type || undefined;
 };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-3">
        <label>Search Keyword:</label>
        <input type="text" class="form-control" ng-model="my.$"/>
      </div>
      <div class="col-md-3">
        <label>Country:</label>
        <select class="form-control" ng-model="my.countryName" ng-options="ctry for ctry in country" ng-change="changeFilter()">
          <option value="">Select a country</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>City</label>
        <select class="form-control" ng-model="my.city" ng-options="key as key for (key, value) in loc" ng-change="changeFilter()">
          <option value="">Select a city</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>Type:</label>
        <select class="form-control" ng-model="my.type" ng-options="key as key for (key, value) in locData" ng-change="changeFilter()">
          <option value="">Select a type</option>
        </select>
      </div>
    </div>
    <hr />
    <div class="row">
      <table class="table table-bordered">
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
        </tr>
        <tr ng-repeat="item in fullData | filter: my">
          <td>{{item.name}}</td>
          <td>{{item.countryName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 2

其实你的做法是对的。也给'item.type as item.type'就行了。

<select class="form-control" ng-model="my.type" ng-options="item.type 
as item.type for item in items | unique:'type'" ng-
change="changeFilter()">
<option value="">Select a type</option>
</select>

这行得通。以前，当 u select "my.type" 在 select 一个值的离子上时，即 "INTERNAL/EX.." 整个项目被 selected。但是我们只需要一个值。

使用通过 angularJS 中的对象属性创建的 select 过滤 table 中的结果

Filter results in table using select created through object property in angularJS

angularjs

json

object

filter

ng-options

使用通过 angularJS 中的对象 属性 创建的 select 过滤 table 中的结果

Filter results in table using select created through object property in angularJS

angularjs

json

object

filter

ng-options

使用通过 angularJS 中的对象属性创建的 select 过滤 table 中的结果