0

私は AngularJS を初めて使用しますが、これまでの作業をとても楽しんでいます。AngularJS の ng-repeat を使用して、次のように、ノードの子がノードのマークアップ内に配置される HTML でツリー構造を作成しました。

<div class="parent">
    I am the parent node.
    <div class="child">
        I am a child node.
        <div class="child">
            I am a grandchild.
            etc...
        </div>
    </div>
</div>

しかし、私が代わりにやりたいのは、同じデータ (ツリー) を使用して、次のようなマークアップを作成することです。

<div class="parent">I am the parent</div>
<div class="child">I am a child</div>
<div class="child">I am a grandchild</div>
<div class="child">I am a great-grandchild</div>
etc....

つまり、リストです。これを行うために思いついた唯一の方法は、visibleDescendants というコンテナー オブジェクトに新しいメソッドを作成することです。これは配列を作成し、次のようになります。

this.visibleDescendants = function(a) {
  if (!a) a = [];
  if (this.selected()) {
    a.push(this);
    if (this.hasChildren()) {
      this.children().forEach(function(child) {
        if (child.selected()) {
          a = child.visibleDescendants(a);
        }
      });
    }
  }
  return a;
};

次に、コントローラー/テンプレートを次のように設定します。

$scope.visibleDescendants = $scope.container.visibleDescendants();
<div ng-repeat="column in visibleDescendants">...</div>

そして、ノードの 1 つが に設定されるたびにselected(false)、$scope.visibleDescendants をリセットします。

私がAngularJSについて読んだり行ったりした他のものと比較して、それはあまり効率的ではなく、あまり慣用的でもないようです。代わりに、テンプレートのパーシャルでこれをより宣言的に行う方法を見つけたいと思います。助けてください！

4

1 に答える 1

0

私が本当にやろうとしていることはプレゼンテーションの問題であり、マークアップに影響を与えるべきではないと思います。つまり、データとマークアップは構造的/意味的に一致する必要があります。CSS のみがその外観を変更する必要があります。

とはいえ、プレゼンテーションのためにデータを再構築するのは賢明ではないと思います。

于 2013-02-18T22:30:57.280 に答える