隐藏和显示元素角

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>