ausblenden und Showelemente, wenn keine Daten von Angular

Question

zurückgegeben ich habe folgende HTML in meiner Angular App:

<div class="row"> 
     <div ng-repeat="Type in Types"> 
      <div class="col s12 m6 l3"> 
       <div class="class1" ng-click="Method1(Type.Id, Type.Desc)"> 
        <div class="white-text"> 
         <img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" /> 
         <h3>{{Type.Desc}}</h3> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 

Die oben macht seinen Job alle Elemente in Types

Anzeigen Jetzt möchte ich zeige eine Textbox und eine Schaltfläche an, wenn keine Elemente in Types sind. Was wäre der beste Weg, dies zu tun?

Answer 1

Sie können dies versuchen:

<div class="row"> 
     <div ng-if=" Types == null || Types.length == 0"> 
      <!-- Your textbox/input button here--> 
     </div> 
     <div ng-repeat="Type in Types"> 
      <div class="col s12 m6 l3"> 
       <div class="class1" ng-click="Method1(Type.Id, Type.Desc)"> 
        <div class="white-text"> 
         <img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" /> 
         <h3>{{Type.Desc}}</h3> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 2

<div class="row" ng-show="Types"> 
     <div ng-repeat="Type in Types"> 
      <div class="col s12 m6 l3"> 
       <div class="class1" ng-click="Method1(Type.Id, Type.Desc)"> 
        <div class="white-text"> 
         <img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" /> 
         <h3>{{Type.Desc}}</h3> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 

<div ng-show="!Types">Button and Textbox go here</div> 

oder

<div ng-show="Types == null"> Button and textbox go here</div>