Angular Multi Select

Question

Hello fair internet folk.

I'm trying to use ng-Options to create a multiple select element in Angular, and have it use a simple number array as its model.

$scope.model = [ 3 , 4 ];

At the moment, the furthest I've been able to get is if the model (showing the selected entries) matches the same format as ng-Options. For instance:

<select multiple
        data-ng-model="article"
        data-ng-options="category.name for category in categories track by category.id">
</select>

$scope.categories = [
    { id: 1, name: "ABC" },
    { id: 2, name: "DEF" },
    { id: 3, name: "GHI" },
    { id: 4, name: "JKL" }
];

$scope.article = [ 
    { id: 3 , name: "GHI" },
    { id: 4, name: "JKL" }
];

The above can be viewed as example 1 on the following : https://jsfiddle.net/hyvwpoL8/1/

Is it possible to treat categories.name as a descriptive label, and use only the value of categories.id as a means of binding it with the model (referenced as model above, or article2 on the fiddle)?

Thanks in advance for any tips !

Answer 1

Just use select as label and do not use track by, both will not work together. You can see running example or following code will work.

   <select multiple
    data-ng-model="article"
    data-ng-options="category.id as category.name for category in categories">
</select>

$scope.categories = [
    { id: 1, name: "ABC" },
    { id: 2, name: "DEF" },
    { id: 3, name: "GHI" },
    { id: 4, name: "JKL" }
];

$scope.article = [3,4];