比较来自不同控制器的 2 GET object

Question

我有 2 个（数组）object 来自 2 个不同的控制器。

Object 1（名称控制器 1）：

[{id:1,"name":"jakov"},...]

Object 2（昵称控制器2）：

[{id:1, "nickname" : "jandric", "nameId" :1, "title" : "master"},...]

我通过服务从控制器 1 广播 object：

$http.get('names/').success(function(data) {
            sharedService.broadcastItem(data);
});

我在控制器 2 中处理广播 object：

$scope.$on('handleBroadcast', function() {
            $scope.names= sharedService.message;
});

控制器 2 也有 GET 请求：

$http.get('nicknames/').success(function (data) {
           $scope.nicknames = data;
});

我有一个简单的 table，我想在其中显示：nicknameId、昵称、名称和标题。

像这样：

<div ng-controller="Nickname">
    <table>
        <tr>
            <th>nicknameId</th>
            <th>nickname</th>
            <th>name</th>
            <th>title</th>
        </tr>
        <tr ng-repeat="nick in nicknames">
            <td>{{nick.id}}</td>
            <td>{{nick.nickname}}</td>
            <td ng-controller="Name">{{??????}}</td> //GET name request trigger
            <td>{{nick.title}}</td>
        </tr>
    </table>
</div>

如何从第一个 object 获取名称，对于给定的 nameId，第二个 object？

请帮忙:D

更新

我在 html 中做到了，就像这样：

    <div ng-controller="Nickname">
        <table>
            <tr>
                <th>nicknameId</th>
                <th>nickname</th>
                <th>name</th>
                <th>title</th>
            </tr>
            <tr ng-repeat="nick in nicknames">
                <td>{{nick.id}}</td>
                <td>{{nick.nickname}}</td>
                <td ng-controller="Name">
                   <div ng-repeat="name in names">
                      <div ng-if="nick.nameId === name.id">
                          {{name.name}}
                      </div>
                   </div>
                </td>
                <td>{{nick.title}}</td>
            </tr>
        </table>
    </div>

所以我在 for 循环中使用 for 循环。有更简单的答案吗？

Answer 1

试试这个

<div ng-controller="Nickname">
    <table>
        <tr>
            <th>nicknameId</th>
            <th>nickname</th>
            <th>name</th>
            <th>title</th>
        </tr>
        <tr ng-repeat="nick in nicknames">
            <td>{{nick.id}}</td>
            <td>{{nick.nickname}}</td>
            <td ng-controller="Name">
                <span ng-reapeat="n in names">
                <span ng-if="nick.nameId == n.id">{{n.name}}</span>
                </span>
            </td> //GET name request trigger
            <td>{{nick.title}}</td>
        </tr>
    </table>
</div>

Answer 2

希望我答对了你的问题：在 Nickname 控制器 $scope 中创建一个索引，它通过 id:

映射到名称

/**
 *
 * @param {Array.<obj>} source: The array of objects the index should be created with.
 * @param {string} property: The property that shall be used as key for the new index
 * @return {object} provides access to all objects by the chosen property
 */
var buildIndex = function(source, property) {
    var temp = {};
    for(var i = 0, len = source.length; i < len; ++i) {
        temp[source[i][property]] = source[i];
    }
    return temp;
};

然后就可以访问模板中的索引了：

<div ng-controller="Nickname">
<table>
    <tr>
        <th>nicknameId</th>
        <th>nickname</th>
        <th>name</th>
        <th>title</th>
    </tr>
    <tr ng-repeat="nick in nicknames">
        <td>{{nick.id}}</td>
        <td>{{nick.nickname}}</td>
        <td>{{index[nick.id].name}}</td>
        <td>{{nick.title}}</td>
    </tr>
</table>

比较来自不同控制器的 2 GET object

Compare 2 GET object from different controllers

javascript

angularjs

angularjs-service

angularjs-controller

angularjs-http