在ng-repeat

Question

在我的项目中，我通过GET请求获得了JSON响应。 subTopics将由用户选择并存储。然后，我使用选定的ID向服务器发送POST请求。

示例JSON1 :(来自GET请求）

{  
"TopicList" :
  [{
    "id": "1234",
    "name": "topic1",
    "number": "1",
    "subTopics": [
       {
          "id": "4567",
          "name": "subTopic1.1",
          "number": "1.1"
       },
       {
          "id": "9876",
          "name": "subTopic1.2",
          "number": :1.2"
       }
    ]
  }]
}

在POST响应中，我从服务器获取另一个JSON对象，我必须在HTML视图中将其显示为表格。在响应JSON中，我有subTopics id（由用户选择），但我没有与id关联的subTopic名称。

我必须在我的表中显示subTopic名称，该名称在单独的对象中可用（参见上面的JSON文件）。我不知道如何在与另一个JSON对象合作时访问第一个JSON对象。

我的表格视图如下，

<tr ng-repeat-start="tableRow in searchCtrl.tableViewData" ng-click="tableRow.expanded = !tableRow.expanded">
    <td>{{tableRow.project.name}}</td>
    <td>{{tableRow.project.number}}</td>
    <td>{{tableRow.project.endDate | date}}</td>
    <td>{{tableRow.topicIds[0]}}</td>
    <td>{{tableRow.matching.score}}</td>
</tr>

如您所见，第4行：<td>{{tableRow.topicIds[0]}}</td>显示了ID。如何显示topicName？

任何帮助都会很明显。

修改

在我的控制器中，此变量包含上述JSON对象。

if (!self.topic) {
        searchService.getTopic().then(
             function (response) {
                self.topic = response.data;
             },
             function (error) {
                alert("Server is not found");
             }
       );
 }

因此，主题变量包含响应JSON对象。也许它会有所帮助。

Answer 1

您可以创建一个带id的函数并返回subTopic。

$scope.getSubTopic = function(id) {
  var selectedSubTopic = {};

  angular.forEach(subTopics, function(subTopic) {
    // loop through subTopics until a matching id is found
    if (subTopic.id === id) {
      selectedSubTopic = subTopic;
      return;
    }
  });

  return selectedSubTopic;
};

然后您可以将第四行更新为：

<td>{{getSubTopic(tableRow.topicIds[0]).name}}</td>

这假设您有一个名为subTopics的数组。

修改

正如我在评论中所提到的，这对于重页和/或大数据集来说最终会表现得相当慢。您可能希望为subTopics生成地图对象以便快速访问。缺点是每次修改TopicList时都必须生成它。

function generateSubTopicMap(topics) {
  var map = {};

  angular.forEach(topics, function(topic) {
    angular.forEach(topic.subTopics, function(subTopic) {
      // use this if you want the map to reference the same data
      // (i.e. updating subTopic.name will update the map at the same time)
      map[subTopic.id] = subTopic;

      // use this if you don't want the map to reference the same data
      // map[subTopic.id] = {};
      // angular.copy(subTopic, map[subTopic.id]);

      // you can also add the parent id here if you need access to it
      // this will modify the original object if you use the first method!
      // map[subTopic.id].parentId = topic.id
    });
  });

  return map;
}

输出如下：

{
  "4567": {
    "id": "4567",
    "name": "subTopic1.1",
    "number": "1.1"
  },
  "9876": {
    "id": "9876",
    "name": "subTopic1.2",
    "number": :1.2"
  }
}

有了这个，你可以在每个GET请求之后调用它，并将主题数组传递给它。

// where topics is the response from the GET request
$scope.subTopics = generateSubTopicMap(topics);

最后要显示你的需要：

<td>{{subTopics[tableRow.topicIds[0])].name}}</td>

修改2

Here is a jsfiddle显示如何使用第二种方法。您所要做的就是将包含TopicList的数组传递给generateSubTopicMap，并返回一个对象，其键为subTopic ID，值为subTopic本身。

我不担心我的第一个解决方案。它不会在ng-repeat内部或者抓住第二级对象时具有高效性。