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

ngRepeat：基于总字符长度而不是项目数限制

1 个答案: