Question

我正在开发一个移动应用程序，其中有一个视图，其中有两个选择标签首先选择标签包括团队选项和＆amp;在第二个选择标记中，存在与用户在第一个选择标记中选择的团队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，但任务是角色和我是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){

}

Answer 1

试试这个：

<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过滤下一个选择下拉列表。对于测试，只需在演示的第一个选择下拉列表中选择最后一个选项，下一个下拉列表将包含已过滤的结果。

Answer 2

您只需按照以下技巧即可完成此操作。我在我的一个项目中使用过相同的东西。

    <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

Answer 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

希望这有帮助！

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

3 个答案: