隱藏和顯示元素角

Question

我在我的角度應用程序下面的HTML：

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

上述聲明其Types

工作顯示所有項目現在，我想顯示文本框和按鈕，只要Types中沒有元素。什麼是最好的方法來做到這一點？

Answer 1

你可以試試這個：

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

或

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