当 Angular 没有返回数据时隐藏和显示元素答案

【问题标题】：Hide and show elements when no data is returned by Angular当 Angular 没有返回数据时隐藏和显示元素
【发布时间】：2017-09-01 15:39:00
【问题描述】：

我的 Angular 应用中有以下 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 中没有元素时显示一个文本框和一个按钮。最好的方法是什么？

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：