AngularJS：基于第一选择标签的ID选择如何过滤在第二个选择标记选项数据 [英] AngularJS: How to filter data in second select tag options based on first select tag's selected id

问题描述

我开发一个移动应用程序，其中有一种观点那里有两个选择标记第一选择标记包括团队和放大器的选择;在第二选择标记有与团队ID相关联形式的用户在第一选择标记选择。我想第二个选择标签的数据过滤器按在NG-change事件第一选择标记的球队ID。

对于第一个选择标签我已填充如下：

 ＆LT;选择NG-变化=showForms（name.id）NG模型=名NG选项=f.name，通过F中的设备跟踪F。 ID＆GT;＆LT; /选择＆GT;
 

我的第二选择标记是这样的：

 ＆LT;选择＆GT;＆LT;在形式formEach选项NG-重复= ID ={{formEach.Formid}}＆GT; {{formEach.Formname}}＆LT ; /选项＆GT;＆LT; /选择＆GT;
 

下面我关心的是我不希望显示的形式阵列内present最初当用户将要选择的团队的任何形式。当用户选择团队，与相关所选小组的ID形式应在第二个选择标签显示。如何过滤会出现或者是同一页上或通过控制器。我熟悉PHP，但任务是在角度和放大器;是新来angularJS。

先谢谢您的快速反应。

样的数据是这样的：

 设备= [
{ID：X001，名称：团队1，图标：离子文档文本，状态：'所有者'，颜色：'棕'}，
{ID：X002，名称：二队，图标：离子文档文本，状态：'所有者'，颜色：黄}，
{ID：X003，名称：团队3，图标：离子文档文本，状态：'所有者'，颜色：'黑'}
];
 

形式的数据是这样的：

 的形式= [
{ID：AS001，teamid：X001，表格名称：FEAM 1，图标：离子文档文本，状态：活动}，
{ID：AS002，teamid：X001，表格名称：FEAM 2'，图标：离子文档文本，状态：草稿}，
{ID：AS003，teamid：X003，表格名称：FEAM 3，图标：离子文档文本，状态：草稿}
];
 

控制器code是这样的：（因为很困惑，作为填充填充我在航行时数组这个视图中的数据的控制器逻辑是不是写的）

  $ scope.showForms =功能（teamId）{}
 

解决方案

您可以通过简单地按照下面的方法来做到这点。我用同样的在我的项目之一。

 ＆LT;选择类=自定义选择NG-模式=teamName数据-NG选项=f.id作为f.name在设备FNG-改变=updateTeamObject（$指数，teamName）;＆GT;
     ＆LT;期权价值=＆GT;选择团队及LT; /选项＆GT;
＆LT; /选择＆GT;
 

和在你的第二个选择，只需使用。

 ＆LT;选择类=自定义选择NG-模式=deviceForms数据-NG选项=o.id作为o.formname邻的形式|过滤器： {teamid：teamName}＆GT;
      ＆LT;期权价值=＆GT;您的团队的数据和LT; /选项＆GT;
  ＆LT; /选择＆GT;
 

小提琴

I am developing a mobile application where there is a view where there are two select tags first select tag consist of options of teams & in the second select tag there are forms associated with team Ids that user select in first select tag. I want to filter the data of second select tag as per the team Id of first select tag on ng-change event.

For the first select tag i have populated as follows:

<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices track by f.id"></select>

my second select tag is this:

<select ><option ng-repeat="formEach in forms" id="{{formEach.Formid}}">{{formEach.Formname}}</option></select>

Here my concern is i dont want to show any forms that are present inside the forms array initially when user is about to select team. When user selects team, the forms with the selected teams id associated should be shown in the second select tag. How the filtering will be occur or is it on same page or through controller. I am familiar with PHP but task is in angular & am new to angularJS.

Thanks in advance for quick response.

Sample data is this:

devices = [
{id : X001, name :'Team 1', icon: 'ion-document-text', status : 'Owner', color : 'brown'},
{id : X002, name :'Team 2', icon: 'ion-document-text', status : 'Owner', color : 'yellow'},
{id : X003, name :'Team 3', icon: 'ion-document-text', status : 'Owner', color : 'black'}
];

forms data is this:

forms= [
{id : AS001, teamid: X001, formname :'Feam 1', icon: 'ion-document-text', status : 'Active'},
{id : AS002, teamid: X001, formname :'Feam 2', icon: 'ion-document-text', status : 'Draft'},
{id : AS003, teamid: X003, formname :'Feam 3', icon: 'ion-document-text', status : 'Draft'}
];

controller code is this: (controller logic is not written as am confused of populating the data as am filling the array at the time of navigation to this view)

    $scope.showForms = function(teamId){

}

解决方案

You can do this by simply following below trick. I've used the same in one of my project.

    <select class="custom-select" ng-model="teamName" data-ng-options="f.id as f.name for f in devices" ng-change="updateTeamObject($index, teamName);">
     <option value="">Select Team</option>
</select>

and in your second select, just use.

    <select class="custom-select" ng-model="deviceForms" data-ng-options="o.id as o.formname for o in forms | filter:{teamid:teamName}">
      <option value="">Your team data</option>
  </select>

Fiddle

这篇关于AngularJS：基于第一选择标签的ID选择如何过滤在第二个选择标记选项数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！