Angular JS Conditional ng-repeat

Question

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" }]

use .. ng-if="$first">

Kalhan
– Kalhan

2015-02-03 08:52:28 +00:00
Commented Feb 3, 2015 at 8:52 — Kalhan
– Kalhan, Commented Feb 3, 2015 at 8:52

Pramod Karandikar · Accepted Answer · 2015-02-03 08:41:38Z

1

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>

answered Feb 3, 2015 at 8:41

Pramod Karandikar

5,3377 gold badges45 silver badges75 bronze badges

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

Comments

Joe Enzminger · Accepted Answer · 2015-02-03 08:43:45Z

1

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

answered Feb 3, 2015 at 8:43

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Comments

Harsh · Accepted Answer · 2015-02-20 06:08:32Z

1

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.

edited Feb 20, 2015 at 6:08

answered Feb 3, 2015 at 8:38

Harsh

1,7051 gold badge10 silver badges16 bronze badges

3 Comments

Amit Singh Over a year ago

Sure I'll try, But I guess since the data for first ul is empty hiding this won't be of any use.

Harsh Over a year ago

Sure. If you completely wanna remove this from DOM. Then use ng-if. ng-if removes elements from DOM instead of hiding it.

Harsh Over a year ago

One thing I learned few days ago. So updating this comment and my answer. It is not better to use Ng-if in everycase as opposed to we are taught.

Collectives™ on Stack Overflow

Angular JS Conditional ng-repeat

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related