AngularJS: How to filter data in second select tag options based on first select tag's selected id

问题

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

}

回答1:

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

回答2:

Try this:

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

Demo: http://jsfiddle.net/U3pVM/15890/

Explanation: Important part is

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

Note how the filter is used. Specify the property (i.e. teamid in your case) where you want the filter to be applied. Since model name stores the selection, you can filter the next select dropdown by using name.id . For testing, just select the last option in the first select dropdown in the demo, the next dropdown will have the filtered results.

回答3:

You can achieve it by pushing the items you want in the second select tag's array at the time of ng-change event of the first tag

In the ng-change function, push items into the array like this in the controller,

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

In Html use that array

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

I have done one plunker with a sample JSON,

Working Plunker

Hope this helps!

来源：https://stackoverflow.com/questions/30475081/angularjs-how-to-filter-data-in-second-select-tag-options-based-on-first-select

标签

angularjs

cordova

ionic-framework