CODEWITHSUNDEEP
angularjsui-select2
Jobacca
Jobacca

Reputation: 191

Problems with ui-select2 and ng-options

Simple problem, probably discussed many times, but I can't find a proper solution on this simple issue.

The problem: Why are the Daltons selectable, but the selected Daltons don't show up in the select-element?

Controller:

var myApp = angular.module('myApp', ['ui.select2']);

function MyCtrl($scope) {
    $scope.daltons = [
        { id: 10, name: 'Joe' },
        { id: 20, name: 'William' },
        { id: 30, name: 'Jack' },
        { id: 40, name: 'Averell' },
        { id: 50, name: 'Ma' }
    ];
    $scope.selectedDaltons = [40]; // Averell is preselected 
};

View:

<div ng-controller="MyCtrl">
    <label for="1">Please select items:</label>
    <select id="1"
            ui-select2
            multiple
            ng-model='selectedDaltons'
            ng-options="dalton.id as dalton.name for dalton in daltons">
    </select>
    <label for="2">Selected Items:</label>
    <ul id="2">
        <li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
    </ul>
</div>

Here it is as a jsfiddle

Upvotes: 1

Views: 2763

Answers (1)

kbroich
kbroich

Reputation: 46

I think the issue is that ng-options is not supported in ui-select2. I reworked your fiddle using the option tag with an ng-repeat:

http://jsfiddle.net/u48j0yyc/1/

<div ng-controller="MyCtrl">
    <label>Please select items:</label>
    <select ui-select2 multiple ng-model='selectedDaltons'>
        <option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
    </select>
    <label>Selected Items:</label>
    <ul>
        <div ng-bind="selectedDaltons"></div>
    </ul>
</div>


var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
    $scope.daltons = [
        { id: 10, name: 'Joe' },
        { id: 20, name: 'William' },
        { id: 30, name: 'Jack' },
        { id: 40, name: 'Averell' },
        { id: 50, name: 'Ma' }
    ];    
    $scope.selectedDaltons = [40]; // Averell is preselected 
};

Upvotes: 3

Related Questions