如何在Angular JS列表框中设置值

Question

How to set the item in Angular JS Listbox. This should be shown as selected in Listbox.

HTML

<select multiple ="multiple" style="width:180px" ng-model="md_fruitpref" ng-options="fruit.Id as fruit.Name for fruit in Fruits"></select>

Controller

//Controller to set the items in Fruit 
$scope.Fruits = [{
    Id: 1,
    Name: 'Apple'
}, {
    Id: 2,
    Name: 'Mango'
}, {
    Id: 3,
    Name: 'Orange'
}, {
    Id: 4,
    Name: 'Guava'
}, {
    Id: 5,
    Name: 'Banana'
}, {
    Id: 6,
    Name: 'Watermellon'
}];

This will fill the Listbox with the various fruits.

Now I want to show the webpage with all the fruits in the Listbox but selected with Apple and Watermellon. So I do this but it does not help.

$scope.md_fruitpref= [{
    Id: 1,
    Name: 'Apple', 
    Id: 6,
    Name: 'Watermellon'    
}];

How to set value in Angular JS Listbox?

Answer 1

Try:

// array with 2 elements (each one an object with the same properties)
$scope.md_fruitpref= [{
    Id: 1,
    Name: 'Apple'
}, {
    Id: 6,
    Name: 'Watermellon'    
}];

The structure you currently have does not work because you only have one element in your md_fruitpref array, and the object is invalid because it uses the same keys twice.

Answer 2

Finally I found the answer to this. It will be :-

$scope.md_fruitpref= [1,6];

After this line soon you will see the selection in Listbox