从 ng-options 选择中过滤 ng-options

Question

我希望解决三个问题……

在我的应用页面中，我有一个选择州，另一个选择县。对于我拥有的州：

<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>

数据：

[
  { state="California", stateID="5"},
  { state="Arizona", stateID="3"},
  { state="Oregon", stateID="38"},
  { state="Texas", stateID="44"},
  { state="Utah", stateID="45"},
  { state="Nevada", stateID="29"}
]

对于我的县选择我有：

<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
 </select>

数据：

[
  { county="Orange", countyID="191", co_state_id="5"},
  { county="Multiple Counties", countyID="3178", co_state_id="3"},
  { county="Sonoma", countyID="218", co_state_id="38"},
  { county="Los Angeles", countyID="190", co_state_id="44"}
]

这是我的ng-repeat：

<div ng-repeat="project in projects | filter:filter">
    <div>
        State: {{project.state}}<br> 
        County: {{project.county}}<br>
        <span ng-hide="{{project.stateID}}"></span>
        <span ng-hide="{{project.countyID}}"></span>
    </div>
</div>

所以，如您所见，我在州选择和县选择中使用stateID，我在县数据集中的co_state_id 中设置了相应的州ID。

我想做一些事情：

1. 在选择州之前隐藏县选择。
2. 选择一个州后，通过选中的stateID/co_state_id过滤县选择选项
3. 先过滤ng-repeatstateID，然后过滤countyID。

我还没有看到将filter.stateID 设置为true 或按数字而不是字符串过滤的方法。当我按 stateID 过滤时，我得到的结果好坏参半，因为一些 stateID 可以在其中包含“1”..

Answer 1

通常每个帖子你只想问一个问题，但我会试一试这三个。

第 1 部分：为 filter.stateID 添加一个 ng-show。由于您无法取消选择状态，因此如果您的角度为 ^1.3，则可以使用一次性绑定。

<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">

第 2 部分：为{co_state_id : filter.stateID} 添加过滤器

<select ng-show="::filter.stateID != null" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">

第 3 部分：

您正在使用过滤器的模式对象，如果 id 的值为 1 则无关紧要：

对象：模式对象可用于过滤数组包含的对象的特定属性。例如 {name:"M", phone:"1"} 谓词将返回一个项目数组，这些项目的属性名称包含“M”，属性电话包含“1”。可以使用特殊的属性名称 $（如在 {$:"text"} 中）接受与对象的任何属性或其嵌套对象属性的匹配。这相当于上面描述的与字符串的简单子字符串匹配。谓词可以通过在字符串前面加上 ! 来否定。例如 {name: "!M"} 谓词将返回属性名称不包含 "M" 的项目数组。

工作片段

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.projects = [{
    name: 'Project1',
    state: 'CA',
    stateID: '5',
    county: 'Orange',
    countyID: '191'
  }, {
    name: 'Project2',
    state: 'CA',
    stateID: '5',
    county: 'LosAngeles',
    countyID: '190'
  }, {
    name: 'Project3',
    state: 'CA',
    stateID: '5',
    county: 'Orange',
    countyID: '191'
  }, {
    name: 'Project4',
    state: 'MadeUp',
    stateID: '1',
    county: 'MadeUp',
    countyID: '190'
  }];

  $scope.st_option = [{
    state: "California",
    stateID: "5"
  }, {
    state: "Arizona",
    stateID: "3"
  }, {
    state: "Oregon",
    stateID: "38"
  }, {
    state: "Texas",
    stateID: "44"
  }, {
    state: "Utah",
    stateID: "45"
  }, {
    state: "Nevada",
    stateID: "29"
  }];

  $scope.co_option = [{
    county: "Orange",
    countyID: "191",
    co_state_id: "5"
  }, {
    county: "Multiple Counties",
    countyID: "3178",
    co_state_id: "3"
  }, {
    county: "Sonoma",
    countyID: "218",
    co_state_id: "38"
  }, {
    county: "Los Angeles",
    countyID: "190",
    co_state_id: "44"
  }];

  $scope.filter = {};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <select ng-model="filter.stateID" 
          ng-options="item.stateID as item.state for item in st_option"></select>
  <select ng-show="::filter.stateID" 
          ng-model="filter.countyID" 
          ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">
  </select>

  <div ng-repeat="project in projects | filter:filter">
    <div>
      <br>Name: {{ project.name }}
      <br>State: {{project.state}}
      <br>County: {{project.county}}
      <br>
      <span ng-hide="{{project.stateID}} "></span>
      <span ng-hide="{{project.countyID}} "></span>
    </div>
  </div>
</div>