angularjs——如何使用ng-repeat元素从另一组数据中获取数据

Question

抱歉，标题根本不清楚，但我真的不知道更好的标题来解释我想做的事情。

基本上，我有这组数据：

$scope.data = [
    {"id": 0, "name": "Testing name 0", "type": 1, "details": {"pinned": true, "link": [1,2]}},
        {"id": 1, "name": "Testing name 1", "type": 0, "details": {"pinned": true, "link": [4]}},
        {"id": 2, "name": "Testing name 2", "type": 0, "details": {"pinned": true, "link": []}},
        {"id": 3, "name": "Testing name 3", "type": 0, "details": {"pinned": true, "link": []}},
        {"id": 4, "name": "Testing name 4", "type": 1, "details": {"pinned": true, "link": [4,0]}},
        {"id": 5, "name": "Testing name 5", "type": 1, "details": {"pinned": true, "link": []}},
        {"id": 6, "name": "Testing name 6", "type": 1, "details": {"pinned": true, "link": [1,2,3,4]}}
  ];

并且此转发器仅显示类型 1 的房间：

<ion-list class="list">
        <div ng-repeat="item in data">
            <ion-item class="item item-stable" ng-if="item.type==1">
                {{item.name}}
            </ion-item>         
            <div ng-if="item.type==1" ng-repeat="(key, value) in item.details">
                <div ng-repeat="linkID in value" ng-if="key == 'link'">
                    <ion-item class="item-accordion">
                        {{linkID}}
                    </ion-item>
                </div>
            </div>
        </div>
    </ion-list>

正如您从上面的代码中看到的那样，我正在打印一个顶级项目，其名称全部为 "type:" 1，作为一个子级别，所有项目都位于 link: [] 内。

到目前为止一切顺利，但 link: [] 中的值是链接帖子的 ID，我想打印 "Testing name 1"、"Testing name 2" 而不是 1,2 或 3 , "Testing name 3" 等等...

我想不出最好的方法。所有数据都在那里，但我无法显示它。我尝试了另一个 ng-if，但没有。有帮助吗？

这里有一个例子：http://codepen.io/nickimola/pen/dMNawj?editors=1010

Answer 1

您可以将链接加载到范围中，然后使用 ID 引用它们（假设它们是有序的）。

<div ng-repeat="linkID in value" ng-if="key == 'link'">
    <ion-item class="item-accordion">
        {{links[linkID]}}
    </ion-item>
</div>

Answer 2

你认为这是你所期望的吗？

<ion-content ng-app="ionicApp" ng-controller="MyCtrl">
  <ion-list class="list">
    <div ng-if="item.type==1" ng-repeat="item in data">
        <ion-item class="item item-stable">
            {{item.name}}
        </ion-item>         
        <div ng-repeat="link in item.details.link">
            <ion-item ng-if="data[link].name" class="item-accordion">
                {{data[link].name}}
            </ion-item>
            <ion-item ng-if="!data[link].name" class="item-accordion">
                Link not found: {{link}}
            </ion-item>
        </div>
        <ion-item ng-if="item.details.link.length == 0">
            Nothing
        </ion-item>
    </div>
  </ion-list>
</ion-content>

Answer 3

与其使用 ng-if 不如使用 filter.

jsfiddle.

上的实例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.data = [{
      "id": 0,
      "name": "Testing name 0",
      "type": 1,
      "details": {
        "pinned": true,
        "link": [1, 2]
      }
    }, {
      "id": 1,
      "name": "Testing name 1",
      "type": 0,
      "details": {
        "pinned": true,
        "link": [4]
      }
    }, {
      "id": 2,
      "name": "Testing name 2",
      "type": 0,
      "details": {
        "pinned": true,
        "link": []
      }
    }, {
      "id": 3,
      "name": "Testing name 3",
      "type": 0,
      "details": {
        "pinned": true,
        "link": []
      }
    }, {
      "id": 4,
      "name": "Testing name 4",
      "type": 1,
      "details": {
        "pinned": true,
        "link": [4, 0]
      }
    }, {
      "id": 5,
      "name": "Testing name 5",
      "type": 1,
      "details": {
        "pinned": true,
        "link": []
      }
    }, {
      "id": 6,
      "name": "Testing name 6",
      "type": 1,
      "details": {
        "pinned": true,
        "link": [1, 2, 3, 4]
      }
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <ion-list class="list">
      <div ng-repeat="item in data|filter:{type:1}">
        <ion-item class="item item-stable">
          {{item.name}}
        </ion-item>
        <div ng-repeat="linkID in item.details.link">
          <ion-item class="item-accordion">
            Lnked post--{{data[linkID].name}}
          </ion-item>
        </div>
        <div ng-show="item.details.link.length==0">
          <i>Nothing linked</i>
        </div>
      </div>
    </ion-list>
  </div>
</div>

angularjs——如何使用ng-repeat元素从另一组数据中获取数据

angularjs - how to use ng-repeat element to get data from another set of data

angularjs

ng-repeat

angularjs-ng-repeat