Angular 多 Select

Question

你好公平的互联网人。

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

$scope.model = [ 3 , 4 ];

目前，我能得到的最大信息是模型（显示 selected 条目）是否匹配与 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 fiddle)?

提前感谢任何提示！

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

是的，您可以将 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 ];

包含 id 的 $scope.article2 将导致预选选项。
以上示例已更新：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

可以考虑使用原生 angular select - ui-select.

Angular 多 Select

Angular Multi Select

javascript

angularjs

select

ng-options

angularjs-ng-options