テンプレートを簡素化する方法は？

Question

angularjsでテンプレートを簡略化する方法は？ここでは、3つの異なるバリアントがpodgruzkiデータオブジェクトの中にありますが、異なるプロパティセットでロードされた異なるオブジェクトに依存します。簡素化することが可能です両方のテンプレート

<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'A'"> 
    <ul class="height-list"> 
     <li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)"> 
      <span ng-attr-title="{{node.a}}">{{node.a}}</span> 
     </li> 
    </ul> 
</div> 
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'B'"> 
    <ul class="height-list"> 
     <li ng-repeat="node in $ctrl.Searched() " ng-mousedown="add(this)"> 
      <span ng-attr-title="{{node.b}}">{{node.b}}</span> 
     </li> 
    </ul> 
</div> 
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'C'"> 
    <ul class="height-list"> 
     <li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)"> 
      <span ng-attr-title="{{node.C}}">{{node.C}}</span> 
     </li> 
    </ul> 
</div> 

Answer 1

は、あなたのコントローラ名が「A」または「フー」であれば、あなたのnodeは、プロパティを持っています1だから、1にするのがあなたのnodeとnameを正規化しましょうaまたはFooという名前です。

その後、あなたは次のようにテンプレートを軽減することができるようになります：

<div class="suggest" ng-show="showSuggest"> 
    <ul class="height-list"> 
     <li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)"> 
      <span ng-attr-title="{{node[$ctrl.Name]}}">{{node[$ctrl.Name]}}</span> 
     </li> 
    </ul> 
</div>