AngularJS:如何对选项值中的两个元素进行排序或筛选

AngularJS: How to sort or filter with two elements in option value

本文关键字：元素 两个 筛选 排序 选项 AngularJS      更新时间：2023-09-26

我知道可能有也可能没有一个简单的解决方法，但是我已经花了太多的时间来弄清楚这个问题。我如何能够显示第三个选项值的查询，我想从json文件显示DB || CSLB的过滤器?

<select ng-model="search.source">
   <option value="DB">DB</option>
   <option value="CSLB">CSLB</option>
   <option value="">DB & CSLB</option>
</select>

json是这样的

"validated": false,
"matches": 10,
"renewed": 2005,
"exMod": 128,
"activeYear": 2003,
"effectiveDate": "10/0/2014",
"address": {
  "zip": 7806,
  "state": "Virgin Islands",
  "city": "Delco",
  "street": "402 Lawton Street"
},
"primaryName": "Lexicondo",
"source": "DB",
"ID": 9,
"_id": "55b5d21cc1389d427f90f9f4"

任何帮助都将非常感激!

希望下面的代码可以帮助您解决您的需求，我用来做排序的唯一的东西是数组的过滤方法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

过滤器的回调检查源是否属于对它们进行分组的选择框中的值，如果不是所有数组将被显示(这就是为什么回调所做的唯一事情是返回true)。

angular.module('TestApp', [])
  .controller('SearchController', function($scope) {
    this.source = 'All';
    this.items = [{
      name: 'One',
      src: 'DB'
    }, {
      name: 'Two',
      src: 'DB'
    }, {
      name: 'Three',
      src: 'CSLB'
    }, {
      name: 'Four',
      src: 'CSLB'
    }];
    this.applyFilter = function() {
      var _this = this;
      this.filteredItems = this.items.filter(function(value) {
        if (_this.source == 'All') return true;
        return value.src == _this.source;
      });
    };
    this.applyFilter();
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body ng-app="TestApp" ng-controller="SearchController as search">
  <select ng-model="search.source" ng-change="search.applyFilter()">
    <option value="All">DB & CSLB</option>
    <option value="DB">DB</option>
    <option value="CSLB">CSLB</option>
  </select>
  <p>{{search.source}}</p>
  <ul>
    <li ng-repeat="item in search.filteredItems">{{item.name}}</li>
  </ul>
</body>

相关文章：