AngularJS：ネストされたdivを作成する方法は？

Question

ng-repeatを使用して次の構造を構築するにはどうすればよいですか？ソリューションは任意の深さをサポートする必要があります...

私はng-repeat-start & ng-repeat-endで再生しましたが、これまでのところ運がありません。任意のヒントが大幅に強化されています

<div>1 
    <div>2 
     <div>3</div> 
    </div> 
</div> 

Answer 1

ng-repeatを利用してネストされたオブジェクトの値をレンダリングするディレクティブによって実現できます。それを参照してくださいhereを参照してください。

指令

app.directive('divRepeater', function($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    template: '<ul></ul>', 
    scope: { 
     obj: '=' 
    }, 
    link: function(scope, element) { 
     var el = angular.element('<span/>'); 
     el.append('<li>' + scope.obj.id + '</li>'); 
     if (scope.obj.nestedObjs) { 
     var nestedObjs = angular.toJson(scope.obj.nestedObjs); 

     /// remove quotes from property names 
     nestedObjs = nestedObjs.replace(/\"([^(\")"]+)\":/g, "$1:"); 

     var nestedDir = "<div ng-init='nestedObjs=" + nestedObjs + "'><div-repeater ng-repeat='nestedObj in nestedObjs track by $index' obj='nestedObj'></div-repeater></div>"; 
     el.append(nestedDir); 
     } 
     $compile(el)(scope); 
     element.append(el); 
    } 
    }; 
}); 

コントローラ

app.controller('MainCtrl', function($scope) { 
    $scope.objs = [{ 
    id: '1', 
    nestedObjs: [{ 
     id: 'a' 
    }, { 
     id: 'b', 
     nestedObjs: [{ 
     id: 'i' 
     }, { 
     id: 'ii' 
     }] 
    }] 
    }, { 
    id: '2' 
    }, { 
    id: '3', 
    nestedObjs: [{ 
     id: 'a', 
     nestedObjs: [{ 
     id: 'i' 
     }] 
    }, { 
     id: 'b', 
     nestedObjs: [{ 
     id: 'i' 
     }, { 
     id: 'ii' 
     }] 
    }] 
    }]; 
}); 

NG-repeatがループしているマークアップ

<div-repeater ng-repeat="obj in objs track by $index" obj="obj"></div-repeater>