Как связать со свойством переменной длины в AngularJS - PullRequest
0 голосов
/ 13 января 2019

У меня есть таблица, в которой будут отображаться результаты, отправленные с сервера, однако сами результаты имеют динамическую форму. Существует также другой API, который обеспечивает форму / схему вложенности. Так что мой HTML выглядит примерно так:

 <tr ng-repeat="result in results">
     <td ng-repeat="path in schema.paths">{{result[path]}}</td>
 </tr>

Конечно, это не работает, так как path может быть одним элементом или может быть многими элементами, выраженными в виде пунктирной строки. То есть путь может быть nesting1, который будет работать, или это может быть nesting1.nesting2.nesting3, который не будет работать. Как я могу приспособить этот вариант использования без использования службы $compile в JavaScript?

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Как уже упоминалось выше, функция get должна работать. В качестве альтернативы вы можете сгладить свой «результат». Например, если есть объект: {'a': {'b': 3}} затем сплющить это будет выглядеть так: {'a.b': 3}

Здесь размещено множество реализаций, например: сплющить вложенный объект

0 голосов
/ 13 января 2019

Если я правильно понимаю этот вопрос, я думаю, что есть функция Lodash, которая может помочь вам здесь.

Это называется get . Использование:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3

_.get(object, ['a', '0', 'b', 'c']);
// => 3

_.get(object, 'a.b.c', 'default');
// => 'default'

В вашем случае это может выглядеть примерно так:

controller.js

import { get } from 'lodash-es';

...

// Your controller code...

...

    this.getResultAtPath = path => get(this.results, path);

template.html

<tr ng-repeat="result in results">
     <td ng-repeat="path in schema.paths">{{ getResultAtPath(path) }}</td>
</tr>

Если вы не хотите использовать зависимость, я предлагаю вам взглянуть на их реализацию для get.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...