Angularjs 如何在select2中使用angular创建相关的选择框？_Angularjs_Angularjs Select2

Angularjs 如何在select2中使用angular创建相关的选择框？

angularjs

Angularjs 如何在select2中使用angular创建相关的选择框？,angularjs,angularjs-select2,Angularjs,Angularjs Select2,在我的应用程序中，我将select2与angularjs一起用于选择框。有一个父选择框，用户可以在其中选择多个组，还有许多其他子选择框具有相同的组选择功能我的问题是如何根据已选择父组选项。i、例如，如果父组是Group1，组2、组3然后子组搜索框应使用仅在父组中选择的选项 HTML: <body ng-app="myModule"> <div ng-controller="myCtrl"> <div ng-repeat="activity in

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

我的问题是如何根据已选择父组选项。i、例如，如果父组是Group1，组2、组3然后子组搜索框应使用仅在父组中选择的选项

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>

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;
  };

}]);

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

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>

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;
  };

}]);

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>

<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>


{{group.text}

2.子选择框：

<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>

<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>


{{group.text}

$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]);
  }
};

$scope.groups=[{“text”：“Group1”，“id”：2}，{“text”：“Group2”，“id”：62}，{“text”：“Group3”，“id”：68}，{“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={
多重：对，
formatSearching:“正在搜索组…”，
formatNoMatches:“未找到组”
};
$scope.parent\u group\u changed=功能（活动）{
活动。活动组=[]；
对于（var i=0；i
任何人都知道如何通过远程下拉菜单实现相同的功能，即使用ajax加载选项