Should not display empty and undefined values when using ng-repeat

Question

I am looping through the JSON to display values Company name and divisions under it , but the issue is that how can i stop to display division names for whose company name is empty

This is my code

<div ng-app="myapp" ng-controller="FirstCtrl">
   <div class="box-footer no-padding">
      <ul class="nav nav-stacked">
         <li ng-repeat="item in tickets" ng-if="item.name!='' && item.name">
            <a class="clearfix">
            {{item.name}}
            <span ng-repeat="form in item.forms" class="pull-right badge ml5" >{{form.name}}</span>
            </a>
         </li>
      </ul>
   </div>
</div>

As you can i tried using ng-if="item.name!='' && item.name"

I don't want to display the divisions if the company name is empty or undefined .

This is my fiddle

http://jsfiddle.net/9fR23/416/

@Pawan I saw you already accept an answer, but I really suggest you to read this one, that explain how to keep using ng-if (avoiding DOM elements creating in ng-repeating). — Mistalis
– Mistalis, Commented Apr 26, 2017 at 13:02

Sajal · Accepted Answer · 2017-04-25 12:26:10Z

1

item.name is not a boolean so you could just use ng-show without second condition.

<li ng-repeat="item in tickets" ng-show="item.name!=''">
   <a class="clearfix">{{item.name}}
     <span ng-repeat="form in item.forms" class="pull-right badge ml5" >{{form.name}}</span>
    </a>
</li>

Your Forked Plunker

answered Apr 25, 2017 at 12:26

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:02:35Z

Your Fiddle may not work because you are using Angular 1.0.1 which has some issue in ng-if. If you are really using this version, you can replace ng-if by ng-show (which will create hidden elements in the DOM).

Anyway, the best solution would be to use Angular 1.2+ which fixes ng-if bugs in ng-repeat. As you can see in the following snippet, I didn't change your code, and it works.

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
  $scope.tickets = [{

    "name": "",
    "forms": [{
      "id": 1,
      "name": "HR",
      "created_at": null,
      "updated_at": null,
      "role": "primary"
    }]
  }, {

    "name": "TCS",
    "forms": [{
      "id": 1,
      "name": "DEV",
      "created_at": null,
      "updated_at": null,
      "role": "primary"
    }, {
      "name": "HR",
      "created_at": null,
      "updated_at": null,
      "role": "primary"
    }]
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>

<div ng-app="myapp" ng-controller="FirstCtrl">
  <div class="box-footer no-padding">
    <ul class="nav nav-stacked">
      <li ng-repeat="item in tickets" ng-if="item.name != '' && item.name">
        <a class="clearfix">
          {{item.name}}
          <span ng-repeat="form in item.forms" class="pull-right badge ml5" >{{form.name}}</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Forked your Fiddle here (just changed Angular version).

Collectives™ on Stack Overflow

Should not display empty and undefined values when using ng-repeat

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