Question

我在Angular中有一个指令，它从$scope中的数组更新，并通过ng-repeat填充其数据：

<div ng-repeat="(key, value) in items">
    ...
    <div>{{value.personid}}</div>
    ...
</div>

正如您在数组中看到的那样，我有一个personid，我想要做的是从Angular后面的api获取相应人员的名字。我不知道如何处理这个问题。我确实有几个想法：

创建一个过滤器，传递personid作为输入，并对api进行AJAX调用以获取名称。虽然这会对服务器进行大量调用，但我不确定是否应该以这种方式使用过滤器。
当我在控制器中创建数组时，在那里迭代它并在将值分配给$scope之前进行所需的调用，然后只在视图中显示它们。
< / LI>
这两种解决方案都是非常密集的，哪一个更好，甚至还没有，是否有更好的方法？

Answer 1

嗯，最简单的方法就是将完整的装饰对象传递给指令。确保$scope.items看起来像这样（示例）：

[
    {
        id: 12,
        name: 'John'
    },
    {
        id: 83,
        name: 'Mary'
    },
    {
        id: 92,
        name: 'Jane'
    },
]

现在你可以像这样遍历用户对象：

<div ng-repeat="user in items">
    ...
    <div>{{ user.name }} has id {{ user.id }}</div>
    ...
</div>

将打印出来

John has id 12
Mary has id 83
Jane has id 92

容易做到！

编辑再次阅读您的问题;我是否理解您只有在您的控制器中有可用的ID？在这种情况下，您只有两个选项：触发传递 all ID的搜索查询，并让服务器返回完整的用户对象。这只需要一次xhr通话。否则，好吧，是的，你确实需要为每个用户拨打电话....我会不惜一切代价避免这种情况。

Answer 2

您可以通过过滤器尝试服务：

app.service('getperson', function() {
    this.getperson= function (x) {
          person = <lookup logic>
        return person;
    }
});
app.filter('personinfo',['getperson', function(getperson) {
    return function(x) {
        return getperson.myFunc(x);
    };
}]);

然后你可以插入你的陈述中：

<div>{{value.personid | personinfo}}</div>

看看它是否适合你

警告。这会为每个记录调用db。否则，将初始范围添加到您需要的所有信息中。

在AngularJS中的指令中加载数据

2 个答案: