Question

我有一个对象列表。我想动态访问他们的属性。从下拉。但我无法做到这一点。

示例：

伪对象

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

伪html-angular 重复：颜色 {{颜色}}

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

- 红色 -blue

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

有什么办法吗？

这里是JSFiddle http://jsfiddle.net/E6yZ8/

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <select ng-model="attribute" ng-change="setAttribute(attribute)">
            <option value="name">name</option>
            <option value="shade">shade</option>
            <option value="id">id</option>
        </select>
        <br/>
        <div ng-repeat='color in colors'>
            {{color}}
        </div>
        <br>
            Desire attribute = {{desireAttribute}}
    </div>                           
</div>


  var $scope;
  var app = angular.module('miniapp', []);

  function 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}, 
        {name:'Blue', shade: 'indigo',id:5}, 
        {name:'Indigo', shade: 'violet',id:6}, 
        {name:'Violet', shade: 'orange',id:7}
    ];

    $scope.desireAttribute = 'none';
    $scope.setAttribute= function(attribute){
    $scope.desireAttribute = attribute;
  }; 
};

由于

Answer 1

如果您只想显示所选属性：

{{color[attribute]}}

Fiddle

顺便说一下，您可以使用<select>指令（更多Angular方式:)改进ng-options

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

Fiddle

动态访问对象属性

1 个答案: