Angularjs 用对象列表填充“选择”';唯一属性值?
我正在创建一个选择下拉列表,它将填充对象列表的现有属性值(唯一)。这将被用作过滤器 例如,假设我有一个如下所示的列表:Angularjs 用对象列表填充“选择”';唯一属性值?,angularjs,Angularjs,我正在创建一个选择下拉列表,它将填充对象列表的现有属性值(唯一)。这将被用作过滤器 例如,假设我有一个如下所示的列表: [ { category: "A" }, { category: "B" }, { category: "C" }, { category: "A" } ] 我希望我的下拉列表中有A、B和C的值。我可以循环列表和category属性,生成一个唯一的列表,但这看起来很混乱。在Angu
[
{
category: "A"
},
{
category: "B"
},
{
category: "C"
},
{
category: "A"
}
]
我希望我的下拉列表中有A、B和C的值。我可以循环列表和category属性,生成一个唯一的列表,但这看起来很混乱。在Angular中有什么可以做到这一点吗?这可能就是您要寻找的: app.js: index.html
安古拉斯普朗克
文件。写(“”);
你好{{name}}
所选:{selvalue.category}
ui.utils包中的唯一过滤器就是您想要的:OP想要一个uniqe类别列表。此代码仍然会生成重复的A
选项。这与唯一的筛选器完美配合。谢谢
var app = angular.module('plunker', ['ui.utils']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.vals = [
{
category: "A"
},
{
category: "B"
},
{
category: "C"
},
{
category: "A"
}
]
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<select ng-model='selvalue' ng-options='val.category for val in vals | unique:category'></select>
Selected:{{selvalue.category}}
</body>
</html>