javascript - Angular 多选

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

公平的互联网人士你好。

我正在尝试使用 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的值作为将其与模型(如上面的模型引用,或 fiddle 上的article2引用)绑定(bind)的手段?

预先感谢您的任何提示!

最佳答案

只使用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];

关于javascript - Angular 多选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32543758/

相关文章:

带有 JOIN 和多个条件的 SQL 查询

c - 使用 select() 检测 UIO 设备文件上的 block

javascript - 接收错误代码3、http_status null、body null、异常状态2

javascript - jQuery选择器属性范围

angularjs - 基于 Controller bool 变量显示/隐藏元素AngularJS

javascript - 当 url 包含空格时, Angular ng 样式背景图像

javascript - JSON 对象使用 javascript 填充在我的 html 选择中

javascript - ToggleClass 使用 jQuery 制作动画?

php - 如何在 Javascript 中包含 PHP;谷歌图表 API

javascript - 获取 ionic 应用程序的当前状态