Question

你好公平的网民。

我尝试使用ng-Options在Angular中创建一个多选元素，并让它使用一个简单的数字数组作为模型。

$scope.model = [ 3 , 4 ];

目前，我能够获得的最远的是模型（显示所选条目）与ng-Options的格式相同。例如：

<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" }
];

以上内容可视为示例1：https://jsfiddle.net/hyvwpoL8/1/

是否可以将categories.name视为描述性标签，并仅使用categories.id的值作为将其与模型绑定的方法（在上面引用的模型或小提琴上的article2）？

提前感谢任何提示！

Answer 1

只需使用select as label而不使用track by，两者都无法合作。您可以看到running example或以下代码可以使用。

   <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];

Answer 2

是的，您可以将名称视为描述性标签，并将ID用作模型值。你可以这样做

<select multiple 
data-ng-model="article2" 
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.article2 = [ 3 , 4 ];

$ scope.article2包含ids将导致预选选项以上示例已更新：https://jsfiddle.net/hyvwpoL8/2/

Angular Js为您提供了许多可供选择的选项。这里有一些：

label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array

Answer 3

您可以考虑使用原生角度选择 - ui-select。

Angular Multi Select

3 个答案: