Hide and show elements when no data is returned by Angular

Question

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

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?

kukkuz · Accepted Answer · 2016-07-29 15:38:38Z

4

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>

edited Jul 29, 2016 at 15:38

answered Jul 29, 2016 at 15:33

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rani Radcliff · Accepted Answer · 2016-07-29 15:36:26Z

1

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

or

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

answered Jul 29, 2016 at 15:36

Rani Radcliff

5,0965 gold badges39 silver badges64 bronze badges

Collectives™ on Stack Overflow

Hide and show elements when no data is returned by Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related