javascript - 如何在angularjs中为递归模板创建行选择器

Question

来自递归项目列表

<script type="text/ng-template" id="menu_sublevel.html">
    id:{{item.id}}
    <ul ng-if="item.subs">
        <li ng-repeat="item in item.subs" ng-click="openItem(item)" ng-include="'menu_sublevel.html'">
            id:{{item.id}}
        </li>
    </ul>
</script>

<ul>
    <li ng-repeat="item in menu.items" ng-click="$event.stopPropagation()" ng-include="'menu_sublevel.html'"></li>
</ul>

及效果

 id:0
    ...id:4
    ...id:5
       ...id:16
       ...id:17
       ...id:18
    ...id:6
       ...id:20
       ...id:21
       ...id:22

我想一次选择一个项目。当我在没有递归的情况下编写嵌套列表时，我使用 id 并且在每个级别上我都有用于项目选择的方法并检查`

levelOneItemSelected.id === item.id

如何选择 id 为 16 的子项，并打开其 id 为 5 的父项​​，并打开下一个 id 为 0 的父项，同时更改选择会关闭打开的项目。

Answer 1

如果，在调用 openItem(item) 时，你还想选择/打开它的祖先，那么最好有 item 的引用为其父级，例如 item.$$parent 。这将使您能够遍历 item的祖先并修改它们。从概念上讲，它看起来像这样:

$scope.openItem(item){
  item.isOpen = true;
  while (item.$$parent){
    item = item.$$parent;
    item.isOpen = true;
  }
}

因此，一种方法是预处理您的项目并设置 .$$parent相应的属性(property)。

如果您不喜欢更改item的想法对象(可能是您的域模型)，您始终可以预处理域模型并生成包装域模型的 View 模型。它看起来像这样(概念上):

$scope.menu = [
  { $$parent: null,
    item: {id: 0, subs: [
      { $$parent: parentObj, // points to its parent
        item: {id: 10, subs: [...]}
      }
    ]}
  },
  // etc ...
]

但是如果您不想修改任何一个，您可以使用 ng-repeat创建一个子作用域并实例化 $$ancestors每个范围级别的属性。 (另请注意，ng-click 应该位于显示的项目上，而不是子项目的 <li> 上):

<script type="text/ng-template" id="menu_sublevel.html">
    <span ng-click="openItem(item, $$ancestors)"
          ng-class="{'open': item.isOpen}">id:{{item.id}}</span>

    <ul ng-if="item.subs" 
        ng-init="$$p = $$ancestors.slice(); $$p.push(item)">

        <li ng-repeat="item in item.subs" 
            ng-init="$$ancestors = $$p"
            ng-include="'menu_sublevel.html'">
            id:{{item.id}}
        </li>
    </ul>
</script>

<ul>
    <li ng-repeat="item in menu.items" 
        ng-init="$$ancestors = []"
        ng-include="'menu_sublevel.html'"></li>
</ul>

然后，在 Controller 中，openItem需要改变:

var currentOpenItem = null,
    currentOpenItemAncestors = [];

$scope.openItem = function(item, ancestors){
   // closes the currently open item and its ancestors
   closeItem(currentOpenItem, currentOpenItemAncestors);

   currentOpenItem = item;
   currentOpenItemAncestors = ancestors;

   openItem(item, ancestors);
}

<强> Demo

这种方法的缺点是，它将一些逻辑卸载到 View 上，并使 View 更加复杂，并且 Controller 的可测试性较差: