Question

我在控制器中声明了以下数据结构：

$scope.tree = {
    label:"A",
    parent:{
        label:"B",
        parent:{
            label:"C"
        }
    }
};

我想最终得到的是：

<ul>
  <li>C
    <ul>
      <li>B
        <ul>
          <li>A</li>
        </ul>
      </li>
    </ul>
  </li>
<ul>

我已尝试过各种方法，包括外部模板，自定义指令等，而我似乎无法让它发挥作用。

有什么想法吗？

Answer 1

在您在评论中链接的另一个答案中，我们使用ng-repeat指令为模板创建新范围。

也许，您可以通过将parent属性包装在数组[...]中来模仿您对数据的这种行为：

<强>控制器

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.tree = {
    label:"A",
    parent:{
      label:"B",
      parent:{
          label:"C"
      }
    }
  };
});

<强> HTML

<ul ng-repeat="field in [tree]" ng-include="'tree.html'"></ul>

<强>模板

<li>
  <div>{{field.label}} {{[field.parent]}}</div>
  <ul ng-if="field" ng-repeat="field in [field.parent]" ng-include="'tree.html'"></ul>
</li>

以下是plunker的链接：http://plnkr.co/edit/7shibX0leK1TXVl5kfPc?p=preview

更好的解决方案是创建自己的ng-include并将子对象传递给它。

如何使用AngularJS以相反的顺序导航树

1 个答案: