我们如何在select2中使用angular

我使用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 =预览

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

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

相关内容

最新更新

热门标签：