угловой Как получить доступ к динамическим данным с несколькими уровнями?

Question

У меня есть некоторые данные, которые я хотел бы пропустить с помощью ngRepeat и динамически получить доступ к данным, которые находятся на верхнем уровне или вложены под пару уровней.

Однако, похоже, что я могу получить свойства верхнего уровня, но не тогда, когда он вложен.

JS:

var mapping = [ 
    {property:'a'}, // works 
    {property:'b.c1'}, // doesn't work 
    {property:'b.c2'} // doesnt work 
]; 

var arr = { 
    a: 'text', 
    b: { 
     c1: 'text2', 
     c2: 'text3' 
    } 
}; 

HTML:

<div ng-repeat="mappingItem in mapping"> 
    <p>{{arr[mappingItem.property]}}</p> 
</div> 

Answer 1

Вы можете использовать $parse службу угловых, чтобы оценить выражение против arr:

$scope.map = function(property) { 
    return $parse(property)(arr); 
}; 

<div ng-repeat="mappingItem in mapping"> 
    <p>{{map(mappingItem.property)}}</p> 
</div> 

http://plnkr.co/edit/tPYcyT4HhqaepJZl0kd8?p=preview

Answer 2

Я сомневаюсь, ваш подход будет работать. Причина, по которой вы пытаетесь получить доступ к объекту, неверна, то есть: arr[mappingItem.property] станет arr['b.c1'], но ваш объект не имеет ключа 'b.c1'. @ Предложение DivyaMV не будет работать либо потому, что свойство b в mapping не является объектом, следовательно, он не имеет ключа c1. Я хотел бы предложить вам либо изменить структуру вашего объекта ИЛИ изменить, как вы пытаетесь получить доступ к объекту, т.е. использовать ng-if для проверки нескольких уровней, ИЛИ вместо зацикливания, отобразить свойства по одному

Answer 3

Если вы используете тип {"property": "b", "chiled": "c1"}, то он работает.

var mapping = [ 
    {property:'a'}, 
    {"property":"b","chiled":"c1"},// works 
    {property:'b.c2'} 
]; 

 

<div ng-repeat="mappingItem in mapping"> 
    <p>{{arr[mappingItem.property][mappingItem.chiled]}}</p> <!-- it works for second object--> 
</div>