代码之家  ›  专栏  ›  技术社区  ›  supereschek

递归树模板,包括以多维索引为参数的ng-click

  •  0
  • supereschek  · 技术社区  · 7 年前

    晚上好

    有没有办法创建一个递归显示结构并在每个项上都有onclick函数的模板。此onclick函数需要当前索引,包括该元素的所有父索引(例如,下表中BMW的[0][2][1])。

    A [0]
      Tree [0][0]
        ...
      House [0][1]
        ...
      Car [0][2]
        Mercedes [0][2][0]
        BMW [0][2][1]
        Audi [0][2][2]
        VW [0][2][3]
        Chrysler [0][2][4]
    B [1]
      ...
    C [2]
      ...
    

    我当前的指令看起来像这样,但我不知道如何才能获得ng click函数每个元素的完整索引。

    app.directive('collection', function () {
        return {
            restrict: "E",
            replace: true,
            scope: {
                collection: '='
            },
            template: `
              <ul>
                <member ng-repeat='member in collection'
                        member='member' index='$parent.index + $index'>
                </member>
              </ul>`
        }
    });
    
    app.directive('member', function ($compile) {
        return {
            restrict: "E",
            replace: true,
            template: "<li ng-click=\"select(member)\">{{member.title}}</li>",
            link: function (scope, element, attrs) {
                var collectionSt = '<collection collection="member.sub"></collection>';
                if (angular.isArray(scope.member.sub)) {
                    $compile(collectionSt)(scope, function(cloned, scope) {
                        element.append(cloned); 
                      });
                }
            }
        }
    });
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   georgeawg    7 年前

    在控制器中,添加 fullIndex 属性,并将该属性作为 ng-click 功能:

    template: `<li ng-click="select(member.fullIndex)">{{member.title}}</li>`,
    

    让模板计算 完整索引 AngularJS表达式的值将使应用程序难以理解、调试和维护。最好用JavaScript进行计算。