4

ディレクティブを使用してツリー構造データをレンダリングしようとした人はいますか?

私がやりたかったのは、データを次のようにレンダリングすることです...

{ 
  name: "root", 
  next: null,
  child: {
    name : "1"
    next : {
      name : "2",
      next : {
        name: "3",
        next: null,
        child: null
      }, 
      child: {
        name: "2-1",
        next: null,
        child: null
      }
    },
    child: {
      name: "1-1",
      next: {
        name: "1-2",
        next: null,
        child: null
      },
      child: null
    }
  }
}

のような HTML データに

<ul>
  <li> root 
    <ul>
      <li> 1 
        <ul>
          <li> 1-1 </li>
          <li> 1-2 </li>
        </ul>
      </li>
      <l1> 2 
        <ul>
          <li> 2-1 </li>
        </ul>
      </li>
      <li> 3 </li>
    </ul>
  </li>
</ul>

データが配列である場合、テンプレートに「ng-repeat」を使用できます。また、データが構造を知っているオブジェクトである場合、「{{ }}」タグを使用できます。

しかし、オブジェクトデータが動的に変化することを扱うという考えはありません。つまり、 $scope 内の 1 つのオブジェクトとしてデータに子を追加し、 angular.js を使用して同期的にレンダリングすることも必要です。

誰かが素晴らしいアイデアを持っているか、あなたがそれをした経験がありますか?

4

1 に答える 1

-1

angularjs

<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">     

  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
  </ul>
</div>

結果

[1] John who is 25 years old.
[2] Jessie who is 30 years old.
[3] Johanna who is 28 years old.
[4] Joy who is 15 years old.
[5] Mary who is 28 years old.
[6] Peter who is 95 years old.
[7] Sebastian who is 50 years old.
[8] Erika who is 27 years old.
[9] Patrick who is 40 years old.
[10] Samantha who is 60 years old.
于 2014-07-13T12:57:06.253 に答える