Call function in *ngIf

Question

I have this situation where I want to call a function to display the correct html mark up. Here is my current code:

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

I would like to combine all the ngif into a function called "showField(name)" that will check and return the right html mark up. How could that be done? My final html mark up should look something like this:

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

Define your markup html as a template and then use `ng-if` directive to include right template. — Hadi J, Aug 21 '17 at 05:37
@HadiJ sorry to come back so late. I think your suggestion is the way to go but I am just not sure how to define mark up html as template. Do I need to create my own directive for the template? — loveprogramming, Sep 27 '18 at 04:06

score 4 · Answer 1 · answered Aug 21 '17 at 06:05

4

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";
}

answered Aug 21 '17 at 06:05

Sachet Gupta

822
5
18

is it valid to call a function evertime condition gets checked ? – omkar Mar 31 '20 at 09:58
@omkar why not? – Deepak Mar 10 '21 at 08:00
1

i mean why cant we use a boolean instead of invoking a function all the way! – omkar Mar 20 '21 at 11:23
i mean why cant we use a boolean instead of invoking a function all the way! – omkar Mar 20 '21 at 11:24

score 1 · Answer 2 · answered Aug 21 '17 at 05:33

1

What you are trying to achieve is right way, just declare the method inside a controller and return boolean value

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

answered Aug 21 '17 at 05:33

Sajeetharan

216,225
63
350
396

I believe I need to return the html mark up and not boolean value. Could you explain a bit more? – loveprogramming Aug 21 '17 at 10:02

Call function in *ngIf

2 Answers2