Html 动态访问对象属性

我有一个物品清单。我想动态访问它们的属性。 从下拉列表中。但我无法做到这一点

例如：

伪对象

{
 color.name = red
 color.id   = 3
}{ 
 color.name = blue
 color.id = 4
}

伪html角度 重复：颜色 {{color}}

如果我从下拉名称中选择。然后将显示伪html

-红色的 -蓝色的

我知道我可以复制所有属性并隐藏那些没有选择的属性，但这会在html中产生很多噪音

有办法吗

这是JSFIDLE

名称
阴凉处
身份证件


{{color}}


Desire属性={{desireAttribute}
var$范围；
var-app=angular.module（'miniapp'，[]）；
函数Ctrl（$scope）{
$scope.attributes=['name'，'shade'，'id']；
$scope.colors=[
{name:'Red'，shade:'white'，id:1}，
{name:'Orange'，shade:'red'，id:2}，
{name:'Yellow'，shade:'blue'，id:3}，
{name:'Green'，shade:'yellow'，id:4}，
{姓名：'Blue'，阴影：'indigo'，id:5}，
{姓名：'Indigo'，阴影：'violet'，id:6}，
{name:'Violet'，shade:'orange'，id:7}
];
$scope.desireAttribute='none'；
$scope.setAttribute=函数（属性）{
$scope.desireAttribute=属性；
}; 
};

---

如果您只想显示选定的属性，请感谢：

{{color[attribute]}}

顺便说一句，您可以通过使用

ng options

指令（更具角度的方式：）来改进您的

）

---

太棒了！非常感谢你！这就是我想要的！

{{color[attribute]}}

<select ng-model="attribute" ng-options="option for option in attributes">
</select>