2

ng-repeat 内で (モデルにバインドされた) さまざまな html テンプレートをレンダリングしたいと考えています。

<div ng-repeat="section in sections | filter:unansweredSections">

    // Here i want something like
    if section == children
        render div#children
    else if section == work
        render div#work

</div>


<div style="display:none" id="children">
    // i want to bind this to sections info
    <input ng-model="???.totalChildren" />
</div>


<div style="display:none" id="work">
    // i want to bind this to sections info
    <input ng-model="???.work1" />
    <input ng-model="???.work2" />
</div>

最後の 2 つの div では、入力を具体的なセクションのパラメーターにバインドする必要があります。

私のモデルは次のようになります。

$scope.sections = [
    {"name" : "children","totalChildren" : 0},
    {"name" : "work","work1" : "","work2" : ""}
]

配列ではなくオブジェクトにすることもできます

$scope.sections = {
    "children"  : {"totalChildren" : 0},
    "work"      : {"work1" : "","work2" : ""}
}

そして、それに簡単にバインドします

<div style="display:none" id="children">
    <input ng-model="sections.childern.totalChildren" />
</div>

しかし、その後、フィルターと順序付けを使用できません。

4

1 に答える 1

2

これには多くの方法があります。

  1. ng-show(and/or ) を使用ng-hideして if のように動作し、各モデル (子または作業) に対応する要素のみを表示できます。このアプローチの問題点は、反対側のモデルから要素を非表示にするだけで削除しないため、DOM が不必要に増加することです。

    <div class="work" ng-show={{isWork()}}>work template</div>
<div class="child" ng-show={{isChild()}}>child template</div>

  2. Angular-UI のようなディレクティブを使用しますui-if(これにより、不要な DOM 要素を維持する問題が回避されます)。

    <div class="work" ui-if={{isWork()}}>work template</div>
<div class="child" ui-if={{isChild()}}>child template</div>

  3. このフィドルの例のように、モデルごとに独自のテンプレートをレンダリングするためのカスタム ディレクティブを作成します: http://jsfiddle.net/bmleite/kbxJm/

于 2013-01-21T14:13:36.507 に答える