Question

我有一个数组things，其中包含不同的对象，例如2个不同的对象：

{name: 'book',
value: '5', 
color: 'blue'}

和

{name:'pen', 
length: '10'}

现在我想使用ng-options在下拉列表中显示所有这些内容。所以我可以这样做：

ng-options="(thing.name + ', ' + thing.value + ', ' + thing.color)" for thing in things"

如果当前的对象是book，它会没问题但是如果它是pen，我就会搞得一团糟。是否有可能区分我想在下拉列表中显示的对象或更好的做法？

Answer 1

您可以做的一件事就是将copy和extend您的对象转换为新对象。

类似于：

var mergedObj = angular.copy(bookThing); // clone bookThing into mergedObj angular.extend(mergedObj, penThing); // extend mergedObj with the contents of penThing

现在使用mergedObj作为下拉列表。您可能需要使用track中的ng-options表示哪个属性是您的密钥。

类似于：

ng-options="item.name for item in mergedObj track by item.name"

Answer 2

理论上，你可以在模板中做一些其他事情，以使数据字段相同，例如

ng-options="(thing.name + ', ' + (thing.value ? (thing.value + ", " + thing.color) : (thing.length))" for thing in things"

......但是这很丑陋并且很难维护，特别是如果你的things数组中有超过这两种不规则的对象类型。您可能最好在指令链接函数中提前按摩数据，以生成包含要嵌入的选项字符串的干净数组。

例如，如果您要查找的是以逗号分隔的每个字段中的字段列表＆＃34;：

scope.myCleanOptions = things.map(function(thing) {
    return Object.keys(thing).join(", "); // or whatever
});

在AngularJS中使用ng-options和不同的对象

2 个答案: