我们如何使用角度在 select2 中制作依赖选择框？答案

【问题标题】：How can we make dependent select boxes in select2 with angular?我们如何使用角度在 select2 中制作依赖选择框？
【发布时间】：2014-08-03 04:18:37
【问题描述】：

我在我的应用程序中将 select2 与 angularjs 一起用于选择框。有一个父选择框，用户可以选择多个组，还有许多其他具有相同组选择功能的子选择框。

我的问题是如何根据父组选择的选项。也就是说，如果父组是 Group1， Group2, Group3 然后子组搜索框应该可以使用仅在父组中选择的选项。

HTML：

<body ng-app="myModule">
  <div ng-controller="myCtrl">
    <div ng-repeat="activity in activities">
        <br><br><br><br>
        <div>
          Parent Group:
          <select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group">
            <option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
          </select>
          <p>selected parent groups {{activity.act_group_id}}</p>
        </div>
        <br><br>
        <div>
          Child Group:
          <select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group">
            <option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
          </select>
          <p>selected child group {{activity.act_auto_approve_group}}</p>
        </div>
    </div>
  </div>
</body>

JS：

var activityModule = angular.module('myModule', ['ui']);

activityModule.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.activities = [{"act_name": "activity1", "act_group_id": "62,68", "act_auto_approve_group": "62"}];

  $scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
  $scope.groupSetup = {
    multiple: true,
    formatSearching: 'Searching the group...',
    formatNoMatches: 'No group found'
  };


  // custom function to convert string into attay (string arra or integer array)
  $scope.split_custom = function(string, spliter, is_integer) {
    $scope.ret_arr = string.split(spliter); // convert string into array
    if (is_integer==1)
      $scope.ret_arr = $scope.ret_arr.map(Number); // convert string array into integer array
    return $scope.ret_arr;
  };

}]);

http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview

【问题讨论】：

标签： angularjs angularjs-select2

【解决方案1】：

经过 6 个小时的努力，我能够以一种棘手的方式使用 ng-change 事件来实现这一点：

HTML：

1.父选择框：

<select ng-change="parent_group_changed(activity)" multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group" >
  <option ng-repeat="group in groups" value="{{group.id}}">{{group.text}}</option>
</select>

2.子选择框：

<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_auto_approve_group" ng-init="activity.act_auto_approve_group=split_custom(activity.act_auto_approve_group,',',1)" data-placeholder="Select Group">
  <option ng-repeat="group in activity.act_groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>

$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.groups2 = $scope.groups;
$scope.groupSetup = {
  multiple: true,
  formatSearching: 'Searching the group...',
  formatNoMatches: 'No group found'
};

$scope.parent_group_changed = function(activity) {
  activity.act_groups=[];
  for(var i=0; i<activity.act_group_id.length; i++)
  {
    var x = activity.act_group_id[i];
    activity.act_groups.push($filter('filter')($scope.groups2, {id:x})[0]);
  }
};

Plunker http://plnkr.co/edit/07Uj8EdDlAyT54AkuaRQ?p=info

【讨论】：

任何人都知道如何通过远程下拉菜单实现同样的事情，即使用 ajax 加载选项的人