2个ng-option，第二个ng-option的条件选项

Question

所以我想做的是相当简单的。我是ng-options的新手。我一直在使用ng-repeat，在黑暗中关于ng-options，但我相当肯定ng-options将更好地为我的任务工作。

我要做的是基于第一个ng-options中的选择，将决定用户在第二个ng-options中看到的内容。

这是我的HTML与我最好的尝试，我想做的事情:

<div class="formRow">
    <select name="Client" ng-model="selectedClient" ng-options="x.Name for x in clients">
    </select>
</div>
<div class="formRow">
    <select name="Profile" ng-options="x.Name for x in profiles" ng-if="x.ID = selectedClient">
    </select>
</div>

你可以想象，我有两个对象:

$scope.clients = [{
  Name:"ClientA",
  ID:"1"
},{
  Name:"ClientB",
  ID:"2"
}];
$scope.profiles = [{
  Name:"NORTH",
  ID:"1",
  ClientID:"1"
},{
  Name:"SOUTH",
  ID:"2",
  ClientID:"1"
},{
  Name:"EAST",
  ID:"3",
  ClientID:"2"
},{
  Name:"WEST",
  ID:"4",
  ClientID:"2"
}];

所以，在我的HTML中，有了ng-options，我真正想要做的是逻辑上我想要在第二个ng-options中出现的配置文件只是其配置文件。ClientID等于clients。第一个选中的ng-options的ID。

我没有得到任何错误与我目前正在进行的。但是在HTML中，只有客户端选项被填充。

我希望这有意义。谢谢!

Answer 1

您要查找的是级联下拉列表。

顺便说一句，要使用ng-options指令，你还需要使用ng-model指令。

你可以在ng-options指令中使用AngularJS内置的过滤器filter来根据客户端过滤出配置文件。

请参阅下面的示例代码片段。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.clients = [
    { name: "ClientA", id: "1" },
    { name: "ClientB", id: "2" }
    ];
    vm.profiles = [
    { name: "NORTH", id: "1", clientId: "1" },
    { name: "SOUTH", id: "2", clientId: "1" },
    { name: "EAST", id: "3", clientId: "2" },
    { name: "WEST", id: "4", clientId: "2" }
    ];
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div class="formRow">
      <select name="Client" ng-model="ctrl.selectedClient" ng-options="x.name for x in ctrl.clients">
      </select>
    </div>
    <div class="formRow">
      <select name="Profile" ng-model="ctrl.selectedProfile" ng-options="x.name for x in ctrl.profiles | filter: { clientId: ctrl.selectedClient.id }">
      </select>
    </div>
  </div>
</div>