2017-08-21 1 views
0

Ich habe diese Situation, in der ich eine Funktion aufrufen möchte, um die korrekte HTML-Markierung anzuzeigen. Hier ist mein aktueller Code:Funktion aufrufen in ng-if

<li ng-repeat="data in myBlock.myData"> 
 
    <div ng-if="data.type=='Jonh'"> 
 
     <div class='row'> 
 
      <div class='col'> 
 
      this is text for Jonh 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div ng-if="data.type=='Roy'"> 
 
     <div class='row'> 
 
     <div class='col'> 
 
      Roy will have a different text 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div ng-if="data.type=='Kevin'" > 
 
     <div class='row'> 
 
      <div class='col'> 
 
      Kevin text is also different 
 
      </div> 
 
     </div> 
 
    </div> 
 
</li>

Ich mag würde die ganze ngif in eine Funktion kombinieren „Showfield (name)“ genannt, die die richtigen HTML-Auszeichnungs überprüfen und zurück. Wie könnte das gemacht werden? Meine letzten HTML-Marke soll in etwa so aussehen:

<li ng-repeat="data in myBlock.myData"> 
    <div ng-if="showField(data.type)"> 
     //Not sure how to implement this part 
    </div>      
</li> 
+0

Definieren Sie Ihr Markup-HTML als Vorlage und verwenden Sie dann die 'ng-if'-Anweisung, um die richtige Vorlage einzufügen. –

Antwort

0

Was Sie versuchen, ist richtiger Weg zu erreichen, erklärt nur die Methode in einem Controller und das Rück boolean Wert

$scope.showField = function(yourdata){ 
    //put the logic 
    return true/false; 
} 
+0

Ich glaube, ich muss die HTML-Markierung und nicht den booleschen Wert zurückgeben. Könntest du ein bisschen mehr erklären? – loveprogramming

2

HTML:

<li ng-repeat="data in myBlock.myData"> 
    <div ng-if="checkValidDataType(data.type)"> 
     <div class='row'> 
      <div class='col'> 
      <label class='title' for="{{data.name}}">{{data.label}}</label> 
      <span class="{{data.type.toLowerCase() + 'Class'}}">This is {{data.type}}</span>     
      </div> 
     </div> 
    </div>      
</li> 

JS:

$scope.checkValidDataType = function(type) { 
    return type === "Roy" || type === "Kevin" || type === "Jonh"; 
}