AngularJS 架构

Question

我有以下应用程序，我在其中循环并显示一些数据。

<div class="thing" ng-repeat="thing in things">
          <h1>{{thing.title}}</h1>
          <p>{{thing.description}}</p>
          <br/>
          <div class="child">
              <!-- ng-repeat="child in ??? -->
              <p>Display child here</p>
          </div>

      </div>

我的数据：

$scope.things = [{
    id: 1,
    title: 'First thing',
    description: 'This is just a thing',
    extra: {
        childs: 3 /* the id of the children */
    }
}, {
    id: 2,
    title: 'Second thing',
    description: 'This is just a thing',
    extra: {}
}, { /* dont displat this object in the ng-repeat="thing in things" */
    id: 3,
    title: 'Child thing',
    description: 'This is a child thing',
    extra: {}
}]

我不明白它如何 ng-repeat 只是 THINGS that are NOT CHILDREN 并在 .child div 中显示 ID 为 thing.extra.childs 的元素。

谁能解释我如何做到这一点？

http://jsfiddle.net/U3pVM/18350/

Answer 1

您肯定需要变形数据对象。您也不希望孩子显示在列表中。基本上迭代并让子对象移动到额外的键中。即解析引用

** 你不想在显示中处理复杂的逻辑，所以在你的模型中你应该做所有脏活。由于您无法更改 API，我们将更改 API 参考

在您的控制器中，我猜这将来自 API，假设您在变量 data 中有 JSON。

//data will be coming from API
/*data = [{
    id: 1,
    title: 'First thing',
    description: 'This is just a thing',
    extra: {
        childs: 3 
    }
}, {
    id: 2,
    title: 'Second thing',
    description: 'This is just a thing',
    extra: {}
}, { 
    id: 3,
    title: 'Child thing',
    description: 'This is a child thing',
    extra: {}
}]; */

然后您可以在收到数据的下方修改此 JSON，并将此代码放入您的控制器中。

for(var i in data){
  if(data[i].extra && data[i].extra.childs){
    for(var j in data){
      if(data[j].id == data[i].extra.childs){
        data[i].child = data[j];
        delete(data[j]);
        break;
      }
    }
  }
}

$scope.things = data;//then put the morphed JSON in the $scope.things

HTML 将是这样的。请注意，我在您的 JSON 中添加了一个密钥 child，他有孩子

<div class="thing" ng-repeat="thing in things">
    <h1>{{thing.title}}</h1>
    <p>{{thing.description}}</p>
    <br/>
    <div class="child" ng-if="things.child">
        <p>{{thing.child.title}}</p>
        <p>{{thing.child.description}}</p>
    </div>
</div>

Answer 2

您应该为此目的使用 ng-if 指令：

<div ng-app>
  <div ng-controller="MainCtrl">

      <div ng-repeat="thing in things">
          <h1>{{thing.title}}</h1>
          <p>{{thing.description}}</p>
          <p ng-if="thing.extra.childs">
              {{thing.extra.childs}}
          </p>
      </div>

    </div>
</div>

JsFiddle : http://jsfiddle.net/nikdtu/op4j7jhj/

Answer 3

    <div class="thing" ng-repeat="thing in things">
        <h1>{{thing.title}}</h1>
        <p>{{thing.description}}</p>
        <br/>
        <div ng-repeat="(key, value) in thing.extra" class="child">
            <p>{{ key }} : {{ value }}</p>
        </div>
    </div>