Angular selected for multiple select

Question

I'm working on this fiddle HERE

this is my controller

angular.module('demoApp', []).controller('DemoController', function($scope) {

  $scope.options = [
    { label: 'one', value: 'a' },
    { label: 'two', value: 'b' },
    { label: 'three', value: 'c' },
    { label: 'four', value: 'd' }
  ];

  $scope.selected = [{ 'sel': 'a' },{ 'sel': 'b' },{ 'sel': 'c' } ] ;


});

the $scope.options is the option for my select dom and the $scope.selected is the selected item in my select dom

this is my index.html

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div ng-repeat="data in selected">
            <select ng-model="data.sel"
                ng-options="opt as opt.label for opt in options">
            </select>
            selected must be : {{data.sel}}
        </div>
    </div>
</body>

what I had is this

enter image description here

what I need is on first load the selected must be selected like this

enter image description here

could anyone help me?

CaffeineShots · Accepted Answer · 2015-02-02 08:35:15Z

2

You can use ngInit for default:

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div ng-repeat="data in selected">
            <select ng-model="data.sel"
            ng-options="opt.value as opt.label for opt in options" ng-init="data.sel = data.sel || options[$index].value">
        </select>
            selected must be : {{data.sel}}
        </div>
    </div>
</body>

fiddle

edited Feb 2, 2015 at 8:35

CaffeineShots

2,1727 gold badges35 silver badges58 bronze badges

answered Feb 2, 2015 at 7:53

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CaffeineShots Over a year ago

hi I try to change the selected object to $scope.selected = [{ 'sel': 'a' },{ 'sel': 'a' },{ 'sel': 'a' } ] ; it seem not working could you try this fiddle jsfiddle.net/kodewrecker/qWzTb/1713

huan feng Over a year ago

Did you try above answer in comment?

huan feng Over a year ago

The original fiddle in the answer has also been updated

DonJuwe · Accepted Answer · 2015-02-02 07:53:20Z

0

You could use ng-init to select the ng-model value by their $index:

<select ng-model="data.sel" ng-options="opt as opt.label for opt in options" ng-init="data.sel = options[$index]"></select>

Updated your Fiddle.

answered Feb 2, 2015 at 7:53

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

3 Comments

CaffeineShots Over a year ago

hi I try to change the selected object to $scope.selected = [{ 'sel': 'a' },{ 'sel': 'a' },{ 'sel': 'a' } ] ; it seem not working could you try this fiddle jsfiddle.net/kodewrecker/qWzTb/1713

DonJuwe Over a year ago

I don't get what your are trying to do.

CaffeineShots Over a year ago

the $scope.selected must be the selected value of select dom sir. since the ng-selected listen to index but $scope.selected returns value not index.

Collectives™ on Stack Overflow

Angular selected for multiple select

2 Answers 2

3 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Related