dom - angularjsで$scopeを介してhtml属性を取得します

Question

さて、AngularJS で ng-include と ng-repeat を使用して再帰的なリストを作成しています。次のようになります。

<div id="wrapper">
<div id="text" ng-click="DivClick()">
    <ul>
        <li id="{{$index}}" ng-repeat="data in layer" ng-include="'recursion.html'"></li>
    </ul>
</div>

<script type="text/ng-template"  id="recursion.html">
<textarea myd-keypress cols="63" rows="1">{{data.content}}</textarea>
<input type="text" myd-numbers value="{{data.price}}"></input>
<ul>
    <li ng-repeat="data in data.layer" ng-include="'recursion.html'" id="{{$parent.$attr('id') + '-' + $index}}"></li>
</ul>

しかし、もちろん、うまくいきません。したがって、基本的に必要なのは、dom 内のすべての < li> 要素に、次のように対応する id があることです。

すべての新しい < li> が「その親の ID」+「-$index」に等しい ID を持つようにします。scope.layer[] とそのレイヤーの子孫には、 < li> の ID を保存して表示するフィールドが含まれていることがわかっていますが、その余分なフィールドを DB に保存することは避けたいと考えています。（例に示されているように）非常に単純ですが、構文を理解することはできません. 助言がありますか？

score 0 · Accepted Answer

データを渡す前に、ブランチを再帰的にループしてプロパティ$scope.labelを追加する関数でループすることができますid

var data = [{
    name: 'foo',
    children: [{
        name: 'foo child',
        children: [{
            name: 'foo child grandchild'
        }, {
            name: 'foo child grandchild2'
        }]
    }, {
        name: 'foo child2'
    }]
}, {
    name: 'bar'
}]

function createID(arr, parentID) {
   for (var i = 0; i < arr.length; i++) {
        var id = (i + 1).toString();
        var thisID = parentID ? parentID + '-' + id : id;
        arr[i].id = thisID;
        if (arr[i].children) {
             createID(arr[i].children, thisID)
         }
    }
 }
createID(data, null)

デモhttp://jsfiddle.net/z4RPz/

dom - angularjsで$scopeを介してhtml属性を取得します

2 に答える 2

Related

Reference