AngularJS - 隐藏导航栏的中间

Question

我有一个导航栏（ng-repeat），如图片显示打击。如果中间部分太长，我怎么能用省略号替换？我试图在控制器中观察数组的长度，一旦数组中有超过5个项目，我是否应该操作数组（用字符串替换内容＆＃39; ...＆＃39;？ ）或做别的事情？

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

Answer 1

我发现了另一种更容易隐藏中间并附加省略号的方法。无需创建另一个数组，只需使用带有ng-if和ng-show的$ index，这里是代码：

<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

只需使用一个单独的数组，例如visibleSubNav，并根据您的subNav数组对其进行修改。

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
}

然后在模板中使用此构造的数组而不是原始数组。