1. 首页
  2. 问题
  3. 从ng-options选择中过滤ng-options
一尘不染

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

angularjs

我希望解决三个问题…

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

<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-repeat由第一stateID，然后由countyID。

我还没有看到一个方法来设置filter.stateID到true或过滤器由一个数字，而不是字符串。当我按stateID进行过滤时，会得到混合的结果，因为其中一些stateID可能包含“
1”。


阅读 260

收藏
2020-07-04

共1个答案

一尘不染

通常，每个帖子您只想问一个问题，但是我会给这三个问题打个针。

第1部分 ：添加ng-show的filter.stateID。由于无法取消选择状态，因此如果角度为^ 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>
2020-07-04