在表中将 ID 显示为另一个名称/短语

Question

我想知道是否有一种方法可以将表格单元格中的 id 显示为另一个对象的另一个名称，因为它们的 id 彼此对应。

我想做的是如果有类似的东西的话以这样的方式显示？

<td class="tableRowText"><p>{{l.SenderId}}</p></td>

以这样的方式。

ng-options="x.ProcessId as x.Name for x in PL"

所以那就是这样的：

<td class="tableRowText"><p>{{l.SenderId}} as x.Name for x in PL</p></td>

如意！希望你们理解我只是想表达我的观点。

提前致谢！

编辑：__________________

这就是表格以及我请求数据的方式。

    app.factory('getTableGridDataService', function ($resource, config) {
        return $resource(config.apiURL + '/Logs/GetLogEvents', {}, { 'post': { method: 'POST' } })
    });



    scope.loggItems = [];
        $scope.fillRealTable = function () {
            var arrayBody = {          
                Sending: $scope.paramSending,
                Receiving: $scope.paramReceiving,
                Logging: $scope.paramLogging,
            };
            var query = postTableGridDataService.post({}, arrayBody);
            query.$promise.then(function (data) {
                var loggItemList = data;
                
                $scope.loggItems = loggItemList
            })
        }

    <table class="table table-striped table-condensed table-hover" id="MainTable">
        <thead>
            <tr>
                <th ng-click="sort('SenderId')" style="cursor:pointer;">
                    Sender
                    <span class="glyphicon glyphicon-sort" ng-show="sortKey=='SenderId'" ng-class="{'glyphicon glyphicon-menu-up':reverse, 'glyphicon glyphicon-menu-down':!reverse}"></span>
                </th>

                <th ng-click="sort('ReceiverId')" style="cursor:pointer;">
                    Reciever
                    <span class="glyphicon glyphicon-sort" ng-show="sortKey=='ReceiverId'" ng-class="{'glyphicon glyphicon-menu-up':reverse, 'glyphicon glyphicon-menu-down':!reverse}"></span>
                </th>

                <th ng-click="sort('LoggingId')" style="cursor:pointer;">
                    Logging source
                    <span class="glyphicon glyphicon-sort" ng-show="sortKey=='LoggingId'" ng-class="{'glyphicon glyphicon-menu-up':reverse, 'glyphicon glyphicon-menu-down':!reverse}"></span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr dir-paginate="l in loggItems.LogEventList|filter:search|orderBy:sortKey:reverse|itemsPerPage:15" pagination-id="mainPagination">

                <td class="tableRowText"><p>{{l.SenderId}}</p></td>
                <td class="tableRowText"><p>{{l.ReceiverId}}</p></td>
                <td class="tableRowText"><p>{{l.LoggingId}}</p></td>
            </tr>
        </tbody>
    </table>

我还从我的 API 中获取另一个对象，其中包含发送 ID、接收方 ID 和记录 ID 的名称，我希望这些名称显示在表中，而不是我的对象中显示的 id桌子。我怎样才能做到这一点？

具有相应 ID 和名称的另一个对象：

    app.factory('getSearchFormData', function ($resource, config) {
        return $resource(config.apiURL + '/SearchFormObj/getSearchFormItems', {} ,{'get': {method:'GET'}})
    });


    $scope.SL = [];
    function SearchData() {
      var query = getSearchFormData.get();
      query.$promise.then(function (data) {
        $scope.SL = data.SystemList;
        console.log($scope.SL);
      });
    };
    SearchData()

这是从 getSearchFormData 返回的对象：

Answer 1

基本思想是在依赖于这两个服务的控制器中，等待两个 Promise 解析，然后循环遍历日志项，然后用名称替换 id，或者将名称添加到每个日志项（如果您愿意）保留 ID。

$scope.fillRealTable = function () {
    var arrayBody = {          
        Sending: $scope.paramSending,
        Receiving: $scope.paramReceiving,
        Logging: $scope.paramLogging,
    };
    var p1 = postTableGridDataService.post({}, arrayBody).$promise;
    var p2 = getSearchFormData.get().$promise;

    //it might be $q.all([p1.promise,p2.promise])
    $q.all([p1,p2]).then(function(data1, data2) {
        var loggItemList = data1;
        var SL = data2.SystemList;

        loggItemList.forEach(function (item) {
            item.SenderName = SL[item.SenderId].name;
            item.ReceiverName = SL[item.ReceiverId].name;
            item.LogginName = SL[item.LogginId].name;
        });

        $scope.loggItems = loggItemList;
    });
}

forEach 中的代码都是猜测，因为您没有提供

getSearchFormData

返回的数据的结构，因此此示例假设它是对象的键值列表，其中键是 ID 之一。例如：

{
  "A001" : { name: "John Smith" },
  "B001" : { name: "Bruce Wayne" }
}

---

P.S：此方法的另一种替代方法是将整个映射移至

getTableGridDataService

中，并让该服务调用另一个服务，这意味着您的视图逻辑仍然很简单，因为它将从服务接收完整结果。