AngularJS - Verberge die Mitte der Navigationsleiste

Question

Ich habe eine Navigationsleiste (ng-Wiederholung) wie Bild zeigt Schlag. Wie kann ich den mittleren Teil durch Ellipsen ersetzen, wenn er zu lang ist? Ich versuche, die Länge des Arrays im Controller zu sehen, sobald es mehr als 5 Elemente im Array gibt, sollte ich das Array manipulieren (ersetzen Sie den Inhalt mit String '...'?) Oder etwas anderes tun?

$scope.$watch(function() { 
     return $rootScope.subNav.length; 
    }, function() { 
     if($rootScope.subNav.length >= 5) { 
      //do something to replace middle with ... 
     } 
    }) 

Answer 1

Ich fand einen anderen Weg, der einfacher ist, die Mitte zu verstecken und die Ellipse anzufügen. Keine Notwendigkeit, ein anderes Array zu erstellen, verwenden Sie einfach $ index mit ng-if und ng-show, hier ist der Code:

<li ng-repeat="y in subNav" ng-if="$index <= 1 || $index >= subNav.length - 2"> 
    <a>{{y.name}}</a> 
    <a ng-show="$index == 1 && subNav.length >= 5">...</a> 
</li> 

Answer 2

einfach ein separates Array verwenden, zum Beispiel visibleSubNav, und es basiert auf dem Unternavigation Array cunstruct.

if($rootScope.subNav.length >= 5) { 
    $rootScope.visibleSubNav = $rootScope.subNav.slice(0,3); 
    $rootScope.visibleSubNav.push('...'); 
    $rootScope.visibleSubNav.push($rootScope.subNav.slice(-1)); 
} else { 
    $rootScope.visibleSubNav = $rootScope.subNav 
} 

Dann verwenden Sie diese konstruierte Array in Ihrer Vorlage anstelle der ursprünglichen.