ngRepeat：根据总字符长度而非项目数限制

Question

我正在使用ng-repeat列出span标记中的一组项目。问题是我在我的div中没有​​空间，所以我需要限制这些项目。我尝试过limitTo：3，但是我遇到了一些问题，其中一些单词比其他单词长，所以它仍然运行。

那么有没有一种方法可以计算字母的总数并使用类似limitTo的东西，这样我就可以将它保留在我有空的空间中？

Answer 1

您只需将您的项目加入一个字符串，然后使用limitTo将其切断。

你的HTML：

<div ng-app="app"> 
    <div ng-controller="Test"> 
     <span>{{arrayString | limitTo:maxLength}}</span> 
<span ng-show="arrayString.length > maxLength" ng-click="maxLength=arrayString.length" class="clickable">Show More</span> 
    </div> 
</div> 

你的控制器;

var app = angular.module('app', []); 

app.controller('Test', function ($scope) { 
    $scope.maxLength = 10; 
    $scope.array = ['one', 'long', 'string']; 

    $scope.$watch('array', function (newValue) { 
     $scope.arrayString = newValue.join(' '); 
    }); 

}); 

JS Fiddle Demo