Question

我们动态创建下拉菜单，就像我们将它们放在页面上一样，非常通用。目前，我需要有2个相互依赖的下拉，员工 - 角色。因为下拉是动态的，它们之间没有关系。

使用AngularJS，在2个下拉菜单之间创建级联的好方法是什么？我想到了下拉的onChange事件，但是在dom完成循环之后我怎样才能将这个事件“注入”下拉？

Answer 1

这JSFiddle应该会有所帮助。我相信它会展示你所追求的。请注意，在$ scope.change_role函数中，您可以根据需要更改列表的值。

var myApp = angular.module('myApp', []);

myApp.controller('myController', function($scope) {
  $scope.msg = "hello";

  $scope.role_list = [{
    "role_id": 1,
    "role_name": "admin"
  }, {
    "role_id": 2,
    "role_name": "everyone"
  }];

  $scope.action_list = [{
    "action_id": 1,
    "action_name": "read"
  }, {
    "action_id": 2,
    "action_name": "write"
  }];

  // When the role is changed, assign the default id of the preferred action
  $scope.change_role = function(role_id) {
    if (role_id == 1) {
      $scope.record.action_id = 2;
    } else {
      $scope.record.action_id = 1;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <select ng-change="change_role(record.role_id)" ng-model="record.role_id" ng-options="obj.role_id as obj.role_name for obj in role_list">
    <option ng-show="record.role_id == 0" value="">-- Choose Role --
    </option>
  </select>
  <select ng-model="record.action_id" ng-options="obj.action_id as obj.action_name for obj in action_list">
    <option ng-show="record.action_id == 0" value="">-- Choose Action --
    </option>
  </select>
  <br>
  <br>Role ID:{{record.role_id}}
  <br>Action ID:{{record.action_id}}
</div>

angularjs：如何级联2个动态创建的下拉列表

1 个答案: