Question

请帮助我，如何在角度

中使用2 JSON Feed进行嵌套选择

经理JSON表：

manager_id
MANAGER_NAME

Project JSON表：

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上使用简单的过滤器表达式来实现此功能。无论何时选择管理器，您都可以根据经理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 Nested选择首选过滤器

1 个答案: