Question

查看Mastering Web Development with AngularJS，我运行此自定义过滤器以修剪文本，剪切最后3个字符，如果输入超出LIMIT，则附加...。

app.html

  <div ng-controller="MyCtrl">
       <table>
        <thead>
            <th>Name</th>
        </thead>
        <tbody>
            <tr ng-repeat="s in strs | customTrim:2">
                <td>{{s}}</td>
            </tr>
        </tbody>
    </table>

app.js

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

myApp.controller("MyCtrl", function ($scope) {

    $scope.strs = ["HEY THERE", "me"];

});

myApp.filter('customTrim', function($filter) {
    var limitToFilter = $filter('limitTo');

    console.log("limitToFilter('ABCDEF', 2)", 
        limitToFilter('ABCDEF', 2));

    return function(input, limit) {
        console.log("input:", input, "input.length", input.length,
         "limit:", limit);
        if(input.length > limit) {
            console.log("returning...");
            console.log(limitToFilter(input, limit-3) + "...");
            return limitToFilter(input, limit-3) + "...";
        }
        return input;
    }
});

但是，strs而不是单个s的长度似乎正在打印出来。

如何将数组中的每个项目传递到customFilter？

控制台

limitToFilter('ABCDEF', 2) A 
input: ["HEY THERE", "me"] input.length 2 limit: 2 
input: ["HEY THERE", "me"] input.length 2 limit: 2

Answer 1

您应该在字符串上使用过滤器，而不是在数组上使用：

<tr ng-repeat="s in strs">
    <td>{{s | customTrim:2}}</td>
</tr>

每个元素应用自定义角度过滤器

1 个答案: