ElenaDBA ElenaDBA - 4 months ago 7
AngularJS Question

Hide and show elements when no data is returned by Angualar

I have the following html in my Angualr 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>


The above does its job displaying all the items in
Types


Now I want to display a textbox and a button whenever there are no elements in
Types
. What would be the best way to do this?

Answer

You can try this:

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