从NG选项选择滤波器NG选项 [英] Filter ng-options from ng-options selection

查看：204 发布时间：2016/4/7 23:28:19 angularjs angularjs-ng-repeat ng-options angularjs-ng-options

本文介绍了从NG选项选择滤波器NG选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望能解决三个问题...

在我的应用程序的网页我有一个选择的状态，另一个用于县。对于状态我有：

 ＆LT;选择NG模型=filter.stateIDNG选项=item.stateID作为item.state在st_option项目＆GT;
＆LT; /选择＆GT;

数据：

 [
  {状态=加州，STATEID =5}，
  {状态=亚利桑那，STATEID =3}，
  {状态=俄勒冈州，STATEID =38}，
  {状态=得克萨斯，STATEID =44}，
  {状态=犹他，STATEID =45}，
  {状态=内华达，STATEID =29}
]

有关我县选择我有：

 ＆LT;选择NG模型=filter.countyIDNG选项=item.countyID作为item.county在co_option项GT＆;
 ＆LT; /选择＆GT;

数据：

 [
  {县=橙色，countyID =191，co_state_id =5}，
  {县=多个区县，countyID =3178，co_state_id =3}，
  {县=索诺玛，countyID =218，co_state_id =38}，
  {县=洛杉矶，countyID =190，co_state_id =44}
]

这是我的 NG-重复：

 ＆LT; DIV NG重复=项目工程|过滤：过滤器＆GT;
    ＆LT; DIV＆GT;
        状态：{{project.state}}＆LT; BR＆GT;
        县：{{project.county}}＆LT; BR＆GT;
        ＆LT;跨度NG隐藏={{project.stateID}}＆GT;＆LT; / SPAN＆GT;
        ＆LT;跨度NG隐藏={{project.countyID}}＆GT;＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

所以，你可以看到我使用 STATEID 上的状态来选择和县我选择我在 co_state_id 在县城的数据集。

我想要做的几件事情：

隐藏县选择，直到选择的状态。

的状态选定后，过滤由县选择选项选中 STATEID / co_state_id

过滤 NG-重复首先将 STATEID ，再由 countyID 。

我还没有看到一个方法来设置 filter.stateID 到真正或由多个过滤器，而不是的字符串。当我通过STATEID筛选我得到不同的结果，因为有些 STATEID 的可以在其中有1。

解决方案

通常你只是想问问每个职位的一个问题，但我给这三个出手了。

第1部分：添加 NG-节目为 filter.stateID 。既然你无法取消的状态，可以使用一次性绑定，如果你的角度是1.3 ^

 ＆LT;选择NG秀=:: filter.stateIDNG模型=filter.countyIDNG选项=item.countyID作为item.county的项co_option＆GT;

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

 ＆LT;选择NG秀=！:: filter.stateID = NULLNG模型=filter.countyIDNG选项=item.countyID为item.county在co_option项目|过滤器：{co_state_id：filter.stateID}GT＆;

第3部分

您正在使用过滤器的模式对象，不应该的问题，如果id的值是1：

对象：一个模式对象可以被用来对由阵列包含的对象过滤特定属性。例如{名称：M，电话：1} predicate将返回具有含M的属性名称和包含1的财产手机项目的数组。一个特殊的属性名称$可以使用（如{$：文本}）接受针对对象的任何属性或其嵌套对象属性的匹配。这相当于简单的字符串匹配用的字符串如上述。在predicate可以通过prefixing以字符串被否定！例如{名称：M} predicate将返回哪些还没有含M的属性名称的项目的数组
。
工作段

\r
\r
VAR应用= angular.module（'应用'，[]）;\r \r app.controller（'myController的'，函数（$范围）{\r   $ scope.projects = [{\r     名称：'PROJECT1'，\r     状态：CA，\r     STATEID：5，\r     县：'橙'，\r     countyID：'191'\r   }，{\r     名称：'Project2的，\r     状态：CA，\r     STATEID：5，\r     县：'洛杉矶'，\r     countyID：'190'\r   }，{\r     名称：项目3，\r     状态：CA，\r     STATEID：5，\r     县：'橙'，\r     countyID：'191'\r   }，{\r     名称：'Project4'，\r     状态：MadeUp'，\r     STATEID：'1'，\r     县：MadeUp'，\r     countyID：'190'\r   }];\r \r   $ scope.st_option = [{\r     状态：加州，\r     STATEID：5\r   }，{\r     状态：亚利桑那\r     STATEID：3\r   }，{\r     状态：俄勒冈州，\r     STATEID：38\r   }，{\r     状态：得克萨斯\r     STATEID：44\r   }，{\r     状态：犹\r     STATEID：45\r   }，{\r     状态：内华达\r     STATEID：29\r   }];\r \r   $ scope.co_option = [{\r     县：橙色\r     countyID：191\r     co_state_id：5\r   }，{\r     县：多个县\r     countyID：3178\r     co_state_id：3\r   }，{\r     县：索诺玛\r     countyID：218，\r     co_state_id：38\r   }，{\r     县：洛杉矶，\r     countyID：190\r     co_state_id：44\r   }];\r \r   $ scope.filter = {};\r }）;
\r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.3.15/angular.min.js\"></script>\r ＆LT; DIV NG-应用='应用'NG控制器='myController的'＆GT;\r   ＆LT;选择NG模型=filter.stateID\r           NG-选项=item.stateID作为item.state在st_option项GT＆;＆LT; /选择＆GT;\r   ＆LT;选择NG秀=:: filter.stateID\r           NG-模式=filter.countyID\r           NG-选项=item.countyID作为item.county在co_option项目|过滤器：{co_state_id：filter.stateID}＆GT;\r   ＆LT; /选择＆GT;\r \r   ＆LT; DIV NG重复=项目工程|过滤：过滤器＆GT;\r     ＆LT; DIV＆GT;\r       ＆LT; BR＆GT;名称：{{project.name}}\r       ＆LT; BR＆GT;状态：{{project.state}}\r       ＆LT; BR＆GT;县：{{project.county}}\r       ＆LT; BR＆GT;\r       ＆LT;跨度NG隐藏={{project.stateID}}＆GT;＆LT; / SPAN＆GT;\r       ＆LT;跨度NG隐藏={{project.countyID}}＆GT;＆LT; / SPAN＆GT;\r     ＆LT; / DIV＆GT;\r   ＆LT; / DIV＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r
I'm hoping to solve three problems...

In my app page I have one select for states and another for counties. For states I have:
<select ng-model="filter.stateID" ng-options="item.stateID as item.state for item in st_option">
</select>
Data:
[
  { state="California", stateID="5"},
  { state="Arizona", stateID="3"},
  { state="Oregon", stateID="38"},
  { state="Texas", stateID="44"},
  { state="Utah", stateID="45"},
  { state="Nevada", stateID="29"}
]
For my County select I have:
<select ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
 </select>
Data:
[
  { 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"}
]
This is my 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>
So, as you can see I'm using the stateID on the state select and on the county select I have the corresponding state id set in co_state_id in the county data set.

I'd like to do a few things:

Hide the county select until a state is selected.

After a state is selected, filter the county select options by the selected stateID / co_state_id

Filter the ng-repeat by first the stateID, then by the countyID.

I also haven't see a way to set filter.stateID to true or filter by a number instead of a string. when I filter by stateID I get mixed results because some stateID's can have "1" in them..
解决方案
Usually you only want to ask one question per post but i'll give these three a shot.

Part 1: Add an ng-show for filter.stateID. Since you can't deselect a state, you can use a one time binding if your angular is ^1.3.
<select ng-show="::filter.stateID" ng-model="filter.countyID" ng-options="item.countyID as item.county for item in co_option">
Part 2: Add filter for {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 }">
Part 3:

You are using the pattern object for the filter, shouldn't matter if the value of the id is 1:

Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object or its nested object properties. That's equivalent to the simple substring match with a string as described above. The predicate can be negated by prefixing the string with !. For example {name: "!M"} predicate will return an array of items which have property name not containing "M".

Working Snippet
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>
这篇关于从NG选项选择滤波器NG选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

从NG选项选择滤波器NG选项 [英] Filter ng-options from ng-options selection

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录关闭

从NG选项选择滤波器NG选项 [英] Filter ng-options from ng-options selection

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录 关闭

登录关闭