Динамическое обращение к вложенному объекту Javascript

У меня есть массив объектов ($scope.fields), которые определяют, как должны быть настроены поля ввода для объектной модели $scope.data. Свойство fieldName на самом деле является путем в data Object к полю. Вложенные объекты разделяются точкой.

eg: 

    $scope.data = {
        user: {
        }
    }
    $scope.fields = [
        {fieldName:'user.firstName',fieldLabel:'First Name',dsiabled:false}
        {fieldName:'user.location.lat',fieldLabel:'Latitude',dsiabled:false}
        {fieldName:'user.location.long',fieldLabel:'Latitude',dsiabled:false}
    ]

Как лучше всего в HTML связать поля $scope.data на основе имени поля. Я знаю о javascript eval, но лучший ли это способ сделать это? И почему этот синтаксис не работает для меня?

ie:

 <div ng-repeat="fieldObj in fields">
    <dd ng-bind="eval('data.' fieldObj.fieldName)"></dd>
 </div>

javascript angularjs angularjs-ng-repeat ng-bind ng-repeat
person Andy59469    schedule 04.06.2015    source источник
comment
См. Доступ к вложенным объектам JavaScript с помощью строкового ключа... однако я понятия не имею, как это можно интегрировать с Angular. почему этот синтаксис не работает у меня Предположительно, вы не можете помещать произвольные выражения в ng-bind.   -  person Felix Kling    schedule 04.06.2015
comment
так что технически я могу ng-bind к функции, которая вернет правильную привязку - спасибо за вашу помощь, Феликс Кинг. Я собираюсь проверить это сейчас.   -  person Andy59469    schedule 04.06.2015

Ответы (2)


arrow_upward
0
arrow_downward

Благодаря @Felix Kling я понял, как это сделать.

Я использовал идею Object by string из ссылки Felix_kings и применил функцию обратного вызова к ng-bind, который получил полную ссылку на объект.

person Andy59469    schedule 04.06.2015

arrow_upward
0
arrow_downward

Недавно я разработал метод Object для выполнения этой работы. Этот однострочный рекурсивный подход обеспечивает динамический доступ к любому значению в структуре объекта массива независимо от того, насколько глубоко оно вложено. По вашему примеру

var fields = [
  {fieldName:'user.firstName',fieldLabel:'First Name',dsiabled:false},
  {fieldName:'user.location.lat',fieldLabel:'Latitude',dsiabled:false},
  {fieldName:'user.location.long',fieldLabel:'Latitude',dsiabled:false}
];

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

document.write(fields.getNestedValue(0,"fieldName"));

Для более глубоко структурированного объекта вы всегда можете сделать так:

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

var arr = [{fox: [{turn:[857, 432]}]}, {sax: [{pana:[777, 987]}]}, {ton: [{joni:[123, 567]}]}, {piu: [{burn:[666, 37]}]}, {sia: [{foxy:[404, 696]}]}],
  myObj = { foo : 1, bar: { baz : 2 }, bee : 3 };

document.write(arr.getNestedValue(3,"piu",0,"burn",1));

person Redu    schedule 06.05.2016