AngularJS 1.0.7：limitto过滤器不起作用

Question

任何简单的{{item.description | limitTo: 10}} {{item.description | limitTo: 10}}在Angular1.0.7中不起作用？ 它显示了整个描述。 控制台中没有错误。

在html页面中：

...
<hr class="no-margin-top" />
<div class="row-fluid custom-row-margin-20">
    <div class="span12 boat-description">{{boat.description | limitTo: 40}}</div>
</div>
...

Answer 1

我将建议使用最新版本的angularjs，但仍应与1.0.7一起使用

DEMO

 var app= angular.module('testApp',[]); app.controller('testCtrl',function($scope){ $scope.boat ={}; $scope.boat.description ="The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array/string are copied. The limit will be trimmed if it exceeds array.length. If limit is undefined, the input will be returned unchanged."; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="testApp" ng-controller="testCtrl"> <hr class="no-margin-top" /> <div class="row-fluid custom-row-margin-20"> <div class="span12 boat-description">{{boat.description | limitTo: 40}}</div> </div> </body>

编辑

对于角度1.0.7， limitTo过滤器仅适用于Array。 根据您的要求，您需要实现自定义过滤器。

.filter("limitToCustom",function(){
    return function(actual,number){
        console.log(number)
        var arrData = actual.split("");
        return  actualData.slice(-number);
    }
});

和HTML

<h1>Hello {{boat.description |limitToCustom : 40 }}!</h1>

Answer 2

原始limitTo仅过滤支持的数组。 在Angular 1.1.12 changelog中添加了对字符串的支持。

在Angular 1.1.12之前，有必要手动剪切字符串。 错误跟踪器中包含一个自定义指令的示例。 我将在此处包括它（注意，不是我写的，也没有经过充分测试）。

/**
 * Usage:
 *   {{some_text | cut:true:100:' ...'}}
 * Options:
 *   - wordwise (boolean) - if true, cut only by words bounds,
 *   - max (integer) - max length of the text, cut to this number of chars,
 *   - tail (string, default: '&nbsp;&hellip;') - add this string to the input
 *     string if the string was cut.
 */
.filter('cut', function () {
    return function (value, wordwise, max, tail) {
        if (!value) return '';

        max = parseInt(max, 10);
        if (!max) return value;
        if (value.length <= max) return value;

        value = value.substr(0, max);
        if (wordwise) {
            var lastspace = value.lastIndexOf(' ');
            if (lastspace != -1) {
                value = value.substr(0, lastspace);
            }
        }

        return value + (tail || ' …');
    };
});

Answer 3

请使用angular js 1.2.10。

DEMO

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <div ng-app="testApp" ng-controller="testCtrl"> <div class="row-fluid custom-row-margin-20"> <div class="span12 boat-description">{{boat.description | limitTo: 50}}</div> </div> </div> <script> var app= angular.module('testApp',[]); app.controller('testCtrl',function($scope){ $scope.boat ={}; $scope.boat.description ="The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array/string are copied. The limit will be trimmed if it exceeds array.length. If limit is undefined, the input will be returned unchanged."; }); </script>

AngularJS 1.0.7：limitto过滤器不起作用

问题描述

3 个解决方案

解决方案1
2 2017-10-16 17:13:00

解决方案2
1 已采纳 2017-10-16 17:27:07

解决方案3
-2 2017-10-18 14:25:29

AngularJS 1.0.7：limitto过滤器不起作用

问题描述

3 个解决方案

解决方案1 2 2017-10-16 17:13:00

解决方案2 1 已采纳 2017-10-16 17:27:07

解决方案3 -2 2017-10-18 14:25:29

解决方案1
2 2017-10-16 17:13:00

解决方案2
1 已采纳 2017-10-16 17:27:07

解决方案3
-2 2017-10-18 14:25:29