角度多选答案

【问题标题】：Angular Multi Select角度多选
【发布时间】：2015-12-09 05:06:14
【问题描述】：

你好公平的互联网人。

我正在尝试使用 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 的值作为将其与模型绑定的方式（引用为上面的模型，或小提琴上的文章 2）？

提前感谢任何提示！

【问题讨论】：

标签： javascript angularjs select ng-options angularjs-ng-options

【解决方案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];

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

是的，您可以将 name 视为描述性标签并将 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 包含 id 将导致预选选项。
上例更新：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

【讨论】：