Angular 嵌套 Select 按第一个 select 过滤

Question

请帮助我，如何在 angular

中使用嵌套 select 的 2 JSON 提要

经理JSONTable:

manager_id
manager_name

项目 JSON Table:

project_id
project_name
manager_id

如果你有任何例子请告诉我:D

https://jsfiddle.net/pu3jo4r1/

HTML:

            <!-- input manager_id -->
        <label ng-controller="SelectProjectManager as ctrl" class="item item-input item-select noborder">
                        <span class="input-label">Manager</span>
                        <select id="managers" ng-model="ctrl.selectedManager" ng-options="i.manager_name for i in ctrl.managers" ng-change="ctrl.managerChanged()">
                                        <option value="">Select</option>
                        </select>
        </label>
        <!-- ./input manager_id -->

        <!-- input project_id -->
        <label ng-controller="SelectProjectManager as ctrl" class="item item-input item-select noborder">
                        <span class="input-label">Project</span>
                        <select id="projects" ng-model="ctrl.selectedProject" ng-options="i.project_name for i in ctrl.projects">
                                        <option value="">Select</option>
                        </select>
        </label>
        <!-- ./input project_id -->

JS 控制器：

.controller('SelectProjectManager', function($http) {
// results are stored in these 2 variables
this.selectedManager;
this.selectedProject;

var that = this;

$http({
  url: 'https://ima.baguscloud.com/voezie/rest-api.php?json=manager',
  method: 'GET',
  dataType: 'json', 
  data: '',         
  headers: {
    'Content-Type': 'application/json'
  }
}).success(function (data, status, headers, config) {
  that.managers = data;
});

this.managerChanged = function() {
  $http({
    url: 'https://ima.baguscloud.com/voezie/rest-api.php?json=project',
    method: 'GET',
    dataType: 'json', 
    data: '',         
    headers: {
      'Content-Type': 'application/json'
    }
  }).success(function (data, status, headers, config) {
    that.projects = data;
  });
};

});

Answer 1

您可以在 ng-repeat 上使用一个简单的过滤器表达式来让它工作。 Whenever the manager is selected, you can filter the project array based on manager id.

<select type="text" ng-disabled="!managerID" class="form-control" ng-model="projectID" >
        <option ng-repeat="lookup in ctrl.projects | filter:{manager_id:managerID}" ng-value="lookup.project_id">
          {{lookup.project_name}}
        </option>
      </select>

这是jsfiddle link

Angular 嵌套 Select 按第一个 select 过滤

Angular Nested Select filter by first select

javascript

json

nested-forms

angularjs