angularjsui-select2

how select the selected value in select2 ui.select in angularjs with ng-selected


I have used ui.select in angular js i have successfully inserted the selected multiple options but now when i am in update how will i select the selected values in ui.select i have used using ng-selected but its not working.

<ui-select multiple ng-model="items.itemOptions" theme="bootstrap"
       sortable="true" close-on-select="false">
<ui-select-match placeholder="Select Modules...">{{$item.module_desc}}</ui-select-match>
<ui-select-choices repeat="itemOptions in itemOption">
    <div ng-bind-html="itemOption.id | highlight: $select.search" ng-selected="selectSource(itemOption.id)"></div>
    <small>
        {{itemOption.name}}
    </small>
</ui-select-choices>

And my selet function in controller

    $scope.selectSource = function(id)
{
    console.log('id'+id);
    var arr = $scope.selectedOptions;
    if (arr) {
        angular.forEach(arr, function (value, key) {
            console.log('sel-id'+value.id);
            if (id == value.module_id)
                console.log('sel-opt-id'+value.id);
            return 'selected';
        });
    }
}

selectedOptions array =

[{id: "1"}, {id: "2"}]

My question how i will show selected options in ui.selct in angular js select2 directive is used.


Solution

  • Even I had faced similar issue, I wanted to edit the selected multiple options. The solution is when you are working on ui-select with multiple options the ng-model should always ends with .selected

    Change the first line accordingly :

    <ui-select multiple ng-model="items.itemOptions.selected" theme="bootstrap"
           sortable="true" close-on-select="false">
    

    Check out it's wiki : https://github.com/angular-ui/ui-select/wiki/ui-select