javascript - 如何在 AngularJS 中绑定(bind)可变长度属性

Question

我有一个表将显示从服务器发送的结果，但是结果本身具有动态形状。还有另一个 API 提供嵌套的形状/模式。所以我的 HTML 看起来像这样:

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

当然，这是行不通的，因为 path 可能是一项，也可能是用点字符串表示的多项。也就是说，路径可以是有效的 nesting1，也可以是无效的 nesting1.nesting2.nesting3。在不使用 JavaScript 中的 $compile 服务的情况下，如何适应此用例？

Answer 1

如果我正确理解这个问题，我认为有一个 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 的实现.