feat(carousel): Hide navigation indicators if only one slide

Author: mraible

src/carousel/test/carousel.spec.js

@@ -63,6 +63,37 @@ describe('carousel', function() {
       var indicators = elm.find('ol.carousel-indicators > li');
       expect(indicators.length).toBe(3);
     });
+    
+    it('should hide navigation when only one slide', function () {
+      scope.slides=[{active:false,content:'one'}];
+      scope.$apply();
+      elm = $compile(
+          '<carousel interval="interval" no-transition="true">' +
+            '<slide ng-repeat="slide in slides" active="slide.active">' +
+              '{{slide.content}}' +
+            '</slide>' +
+          '</carousel>' 
+        )(scope);
+      var indicators = elm.find('ol.carousel-indicators > li');
+      expect(indicators.length).toBe(0);
+      
+      var navNext = elm.find('a.right');
+      expect(navNext.length).toBe(0);
+      
+      var navPrev = elm.find('a.left');
+      expect(navPrev.length).toBe(0);
+    });
+    
+    it('should show navigation when there are 3 slides', function () {  
+      var indicators = elm.find('ol.carousel-indicators > li');
+      expect(indicators.length).not.toBe(0);
+      
+      var navNext = elm.find('a.right');
+      expect(navNext.length).not.toBe(0);
+      
+      var navPrev = elm.find('a.left');
+      expect(navPrev.length).not.toBe(0);
+    });
 
     it('should go to next when clicking next button', function() {
       var navNext = elm.find('a.right');

template/carousel/carousel.html

@@ -1,8 +1,8 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
-    <ol class="carousel-indicators">
+    <ol class="carousel-indicators" ng-show="slides().length > 1">
         <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
     </ol>
     <div class="carousel-inner" ng-transclude></div>
-    <a ng-click="prev()" class="carousel-control left">&lsaquo;</a>
-    <a ng-click="next()" class="carousel-control right">&rsaquo;</a>
+    <a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">&lsaquo;</a>
+    <a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">&rsaquo;</a>
 </div>