How can we make dependent select boxes in select2 with angular?

Question

I am using select2 with angularjs for select boxes in my application. There is one parent select box where user can select multiple groups and there are many other child select boxes with the same group selection feature.

My problem is how to restrict child group search options according to parent group selected option. i.e. say if parent groups are Group1, Group2, Group3 then the child group search box should avail the options selected in parent groups only.

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

khichar.anil khichar.anil · Accepted Answer · 2014-08-03T10:52:57

After 6 hours struggle, I was able to achieve this using ng-change event in a tricky way:

HTML :

1.Parent select box:

<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.Child select box:

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

JS

$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

How can we make dependent select boxes in select2 with angular?

1 Answers