CODEWITHSUNDEEP
angularjs
Amit Singh
Amit Singh

Reputation: 2275

Angular JS Conditional ng-repeat

I am trying to display my menu using ng-repeat.

HTML:

<ul class="dash-menu-list" ng-controller="jsonMenu">
<li ng-repeat="menu in menus" class="{{menu.class}}"> 
    <a href="#"> 
        <i class="{{menu.img}}"></i> 
        <span> {{menu.text}}</span> 
    </a>
    <div class="sub-menu">
        <ul>
            <li><a href="#">{{menu.sub_text}}</a></li>
            <li><a href="#">{{menu.subtext}}</a></li>
        </ul>
    </div>
</li>
</ul>

JS:

var menuApp = angular.module('menuApp', []);
menuApp.controller('jsonMenu', function($scope, $http) {
  $http.get('left_menu.json')
       .then(function(res){
          $scope.menus = res.data;                
        });
});

Which is working fine, What i want to tweak is I don't want this

<ul>
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

to be added in the first repeat. How can I achieve that?

Update: My JSON FILE's DATA

[{"text":"DASHBOARD", "img":"dashboard-icon"},
 { "text":"EVENT MANAGER", "sub_text":"Servers", "subtext":"Process", "img":"current-icon", "class":"select"},
 { "text":"REPORT MANAGER", "sub_text":"Servers", "subtext":"Process", "img":"report-icon"},
 { "text":"EBPM MONITOR", "sub_text":"Servers", "subtext":"Process", "img":"ebpm-icon" },
  { "text":"FILE MANAGER", "sub_text":"Servers", "subtext":"Process", "img":"folder-icon" }]

Upvotes: 0

Views: 1452

Answers (3)

Harsh
Harsh

Reputation: 1695

We can use $index here for this. We can place ng-show or ng-hide on $index being 0, which means first element of ng-repeat.

<ul ng-hide="$index == 0">
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

Please use ng-if if you want to completely remove element from DOM instead of hiding it via ng-show or ng-hide.

It is not better to use Ng-if in every single case. Ng-hide does what normally a CSS does and is very inexpensive and light weight. Ng-if on the other hand, does DOM manipulation which is quite expensive. So considering your case, Ng-hide/show would be useful and light weight since you have only two bindings. Use ng-if, only where you have lots of bindings(I suppose 20 plus in something like a ng-repeat loop). You need to balance your approach acc to situation, blanket approach will slow down your application.

Upvotes: 1

Joe Enzminger
Joe Enzminger

Reputation: 11190

<ul ng-hide="$first">
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

will also work.

Angular places $first, $last, $even, $odd, and $middle on scope of ng-repeat elements where appropriate.

Upvotes: 1

Pramod Karandikar
Pramod Karandikar

Reputation: 5329

You can use ng-if along with $index. Advantage of ng-if over ng-hide is that it completely removes the elements from DOM instead of only hiding them.

<ul ng-if="$index != 0">
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

Upvotes: 1

Related Questions