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>

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

到目前为止一切顺利，但link: []内的值是链接帖子的ID，而不是1,2或3我想打印“测试名称1”，“测试名称2”，“测试名称3“依此类推......

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

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

Answer 1

认为这就是你的期望？

<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 2

而不是使用ng-if更好地使用filter。

jsfiddle上的实例。

＆＃13;

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]
      }
    }];
  });

＆＃13;

<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>

＆＃13;

Answer 3

您可以将链接加载到范围中，然后使用id引用它们（假设它们按顺序排列）。

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

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

3 个答案: