2016-03-20 9 views
2

Ich möchte so etwas wie ng-repeat="statement in {{ range }}Statements" tun, wo Bereich einen ui param Wert ist, der auf die URL abhängig pos, neu und neg sein können:Dynamische ng-repeat mit ui param Wert

/#/sidemenu-statements/1/pos 
/#/sidemenu-statements/1/neg 
/#/sidemenu-statements/1/neu 

Es würde mir erlauben, um die drei Listen unten zusammenzufassen ... ist es möglich, dies zu tun?

Wenn nicht, was wäre ein besserer Ansatz?

statements.view.html

<div ng-controller="StatementsController"> 
    <!-- List of positive statements --> 
    <div class="list card" ng-repeat="statement in posStatements | orderBy: '-timestamp'" ng-if="range==='pos'"> 
     <div class="item item-icon-left"> 
      <i class="icon {{ statement.accountIcon }}"></i> 
      <h2>{{ statement.accountTag }}</h2> 
      <span am-time-ago="{{ statement.timestamp }}"></span> 
     </div> 
     <div class="item item-body"> 
      <span>{{ statement.statement }}</span> 
      <div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div> 
     </div> 
     <div class="button-bar"> 
      <a class="button button-balanced"><i class="icon ion-happy"></i></a> 
      <a class="button button-dark">Skip</a> 
      <a class="button button-assertive"><i class="icon ion-sad"></i></a> 
     </div> 
    </div> 

    <!-- List of neutral statements --> 
    <div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neu'"> 
     <div class="item item-icon-left"> 
      <i class="icon {{ statement.accountIcon }}"></i> 
      <h2>{{ statement.accountTag }}</h2> 
      <span am-time-ago="{{ statement.timestamp }}"></span> 
     </div> 
     <div class="item item-body"> 
      <span>{{ statement.statement }}</span> 
      <div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div> 
     </div> 
     <div class="button-bar"> 
      <a class="button button-balanced"><i class="icon ion-happy"></i></a> 
      <a class="button button-dark">Skip</a> 
      <a class="button button-assertive"><i class="icon ion-sad"></i></a> 
     </div> 
    </div> 

    <!-- List of negative statements --> 
    <div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neg'"> 
     <div class="item item-icon-left"> 
      <i class="icon {{ statement.accountIcon }}"></i> 
      <h2>{{ statement.accountTag }}</h2> 
      <span am-time-ago="{{ statement.timestamp }}"></span> 
     </div> 
     <div class="item item-body"> 
      <span>{{ statement.statement }}</span> 
      <div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div> 
     </div> 
     <div class="button-bar"> 
      <a class="button button-balanced"><i class="icon ion-happy"></i></a> 
      <a class="button button-dark">Skip</a> 
      <a class="button button-assertive"><i class="icon ion-sad"></i></a> 
     </div> 
    </div> 
<div> 
+0

Könnten Sie nur bewerten, ob es n ist zB/neu/pos in einem Controller, binden Sie das an ein neues Feld im $ scope obj und übergeben Sie das stattdessen an den ng-repeat? – dYale

Antwort

1

ich folgendes tun würde:

ng-repeat="statement in getStatements(range)" 

und fügen Sie diese Funktion in der Steuerung (ein Schalter/Case-Struktur, wenn Sie verwenden können‘ Wieder kein Fan der String-Verkettung):

+0

Danke das funktioniert super! – methuselah