AngularJS：如何根据第一个选择标签的选定ID过滤第二个选择标签选项中的数据答案

【问题标题】：AngularJS: How to filter data in second select tag options based on first select tag's selected idAngularJS：如何根据第一个选择标签的选定ID过滤第二个选择标签选项中的数据
【发布时间】：2015-05-27 06:48:47
【问题描述】：

我正在开发一个移动应用程序，其中有一个视图，其中有两个选择标签第一个选择标签由团队的选项组成，在第二个选择标签中，有与用户在第一个选择标签中选择的团队 ID 相关联的表单。我想根据 ng-change 事件中第一个选择标签的团队 ID 过滤第二个选择标签的数据。

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

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

我的第二个选择标签是这样的：

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

我担心的是，当用户即将选择团队时，我最初不想显示表单数组中存在的任何表单。当用户选择团队时，与所选团队 ID 相关联的表单应显示在第二个选择标签中。过滤将如何发生，或者是在同一页面上还是通过控制器。我熟悉 PHP，但任务是 angular 并且是 angularJS 的新手。

提前感谢您的快速回复。

样本数据是这样的：

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= [
{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'}
];

控制器代码是这样的：（控制器逻辑不是因为在导航到此视图时填充数据而混淆了填充数据而编写的）

    $scope.showForms = function(teamId){

}

【问题讨论】：

如果你写了一些东西，你会取悦你的控制器的代码吗？否则，请发布您的完整对象。
您的第二个选择标签需要在您选择团队后才显示价值？这是你的要求吗？
显示您正在迭代的 JSON 或数组。没有结构就很难提出任何解决方案
@Alhuck 是的，应该是。
@Vineet 我的控制器代码并不重要，因为当我导航到该视图时，我正在用值填充所有数组。并且这些数组存在于父控制器中

标签： angularjs cordova ionic-framework

【解决方案1】：

您只需按照以下技巧即可做到这一点。我在我的一个项目中使用了相同的方法。

    <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>

在您的第二次选择中，只需使用。

    <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

【讨论】：

这两个数组在父控制器中，在我在 body 标签上定义的控制器中。我正在尝试，但无法锻炼....
我明白你的意思。您应该阅读如何在 Angular 中使用 $controller 服务。这个问题会帮助你。 *.com/questions/25417162/…
你有没有写在 updateTeamObject($index, teamName)
是的。我已经在这个函数下编写了我的逻辑。但你的逻辑可能与我的不同
或者分享你的完整脚本代码，我可以帮你解决

【解决方案2】：

试试这个：

<div ng-app>
    <div ng-controller="TodoCtrl">
        <select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices"></select>
        <select ng-model="selected">
            <option ng-repeat="formEach in forms| filter:{teamid:name.id }" id="{{formEach.id}}">{{formEach.formname}}</option>
        </select>
    </div>
</div>

演示：http://jsfiddle.net/U3pVM/15890/

解释： 重要的部分是

ng-repeat="formEach in forms| filter:{teamid:name.id }"

注意过滤器的使用方式。指定您希望应用过滤器的属性（即您的情况下的 teamid）。由于模型 name 存储选择，您可以使用 name.id 过滤下一个选择下拉列表。进行测试时，只需在演示的第一个选择下拉菜单中选择最后一个选项，下一个下拉菜单就会有过滤后的结果。

【讨论】：

这两个数组在我在 body 标签上定义的控制器中的父控制器中。它在输出上有什么不同吗？因为我没有得到输出
确保选择标签在控制器内，以便它们可以访问范围和相应的变量

【解决方案3】：

您可以通过在第一个标签的ng-change事件时将您想要的项目推送到第二个选择标签的数组中来实现

在ng-change函数中，在控制器中像这样将项目推送到数组中，

$scope.specifications = [];
angular.forEach($scope.allSpecifications, function(spec) {
  if(spec.id == id) {
    $scope.specifications.push(spec)
  }
});

在 Html 中使用该数组

<select ng-change="showSpec(car.id)" ng-init="car = carsList[0]" ng-model="car" ng-options="car.name for car in carsList"></select>
<select>
  <option ng-repeat="primitive in specifications" id="{{primitive.id}}">{{primitive.name}}</option>
</select>

我已经用一个示例 JSON 做了一个 plunker，

Working Plunker

希望这会有所帮助！

【讨论】：