Использование ng-repeat с динамическим значением - PullRequest
Новая
       0

Использование ng-repeat с динамическим значением

0 голосов
/ 27 марта 2019

У меня есть HTML, который отображается на основе загруженных метаданных.В итоге формируется таблица данных на основе значения области действия в контроллере.

В контроллере:

$ scope.arrayOfCustomObjects = [{entry: data1}, {entry: data2}];

Метаданные содержатся в файле .json в следующем формате (я добавил два здесь, на самом деле их сотни, каждый из которых заканчивается описанием элемента HTML): 

loadedMetaData:

{
    "field_1": {
        "index": 0,
        "type": "selectbox",
        "nameId": "arrayOfCustomObjects" <-- this is the string name of a scoped variable in a controller.
      },
    "field_2": {
        "index": 1,
        "type": "textinput",
        "nameId": "textField"
     }
}

И HTML выглядит так: 

<div ng-repeat="field in loadedMetaData>
    <div ng-repeat="item in field.nameId">
         <!-- build out HTML for each -->     
    </div>
</div>

Когда я запускаю это, он не работает (он никогда не перебирает $ scope.arrayOfCustomObjects).Если я добавляю строку для отображения {{field.nameId}}, это отображает 'arrayOfCustomObjects', но я думаю, что это просто строка, а не значение, которое она представляет.

Если я изменяю HTML на это, оно работает:

<div ng-repeat="field in loadedMetaData>
    <div ng-repeat="item in arrayOfCustomObjects">
         <!-- build out HTML for each -->     
    </div>
</div>

... но есть ли способ сохранить абстракцию, ради которой я собираюсь?Я хотел бы иметь возможность определять целевой массив в метаданных, поэтому мне не нужно определять специфичные для контроллера имена в самом HTML.

Ответы [ 4 ]

0 голосов
/ 28 марта 2019

Используйте обозначение скобки средство доступа к свойству с ключевым словом this: 

<div ng-repeat="(fieldKey, fieldValue) in loadedMetaData>
    <div ng-repeat="item in this[fieldValue.nameId]">
         <!-- build out HTML for each -->     
    </div>
</div>

Из документов:

Можно получить доступ к объекту контекста [($ scope)], используя идентификатор this, и объекту localals, используя идентификатор $locals.

- Руководство разработчика AngularJS - Контекст выражения

0 голосов
/ 27 марта 2019

Принимает значение в виде строки 

var field = { "nameId": "arrayOfCustomObjects" }

, измените его на 

var field = { "nameId": arrayOfCustomObjects }
0 голосов
/ 27 марта 2019

Для достижения ожидаемого результата используйте приведенные ниже изменения из кода вашего плункера

  1. Использование функции объема для преобразования строки в переменную области действия
  2. Визуализация этой переменной во внутреннем ng-repeat 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.arrayOfCustomObjects = [1,2,3]
$scope.loadedMetaData = {
    "field_1": {
        "index": 0,
        "type": "selectbox",
        "nameId": "arrayOfCustomObjects" 
      },
    "field_2": {
        "index": 1,
        "type": "textinput",
        "nameId": "textField"
     }
}
 
  $scope.getVariable = function(val){
    return $scope[val]
  }
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl as ctrl">

 <div>
      <div ng-repeat="field in loadedMetaData">
        <div ng-repeat="item in getVariable(field.nameId)">
    {{item}}
</div>
</div>
    </div>

</div>

</body>
</html>

codepen - https://codepen.io/nagasai/pen/XGLZzX

0 голосов
/ 27 марта 2019

Предположим, что ваш loadedMetadata имеет вид: 

[
    "arrayOfCustomObjects",
    // other 'data' object keys
]

Тогда у вас может быть такой объект, который хранит ваши фактические данные: 

data = {
    "arrayOfCustomObjects": [
        // some items
    ]
}

Затем в шаблоне выделать: 

<div ng-repeat="field in loadedMetaData>
    <div ng-repeat="item in data[field]">
         <!-- display the items in arrayOfCustomObjects -->     
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...