2017-08-21 2 views
0

J'ai cette situation où je veux appeler une fonction pour afficher la bonne balise html. Voici mon code actuel:Fonction d'appel dans ng-si

<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>

Je voudrais combiner toutes les ngif dans une fonction appelée « Showfield (nom) » qui contrôle et retourner la marque droite html vers le haut. Comment cela pourrait-il être fait? Ma note finale html up devrait ressembler à ceci:

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

Définissez votre code HTML en tant que modèle, puis utilisez la directive 'ng-if' pour inclure le bon modèle. –

Répondre

0

Ce que vous essayez d'atteindre est bonne façon, déclarer que la méthode dans un contrôleur et retour valeur booléenne

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

Je crois que je dois retourner la balise html et non la valeur booléenne. Pourriez-vous expliquer un peu plus? – 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"; 
}