javascript - 对每个元素应用自定义 Angular 过滤器

Question

查看Mastering Web Development with AngularJS ，我运行此自定义过滤器来 trim 文本，剪切掉最后 3 个字符，并在输入超出限制时附加 ...。

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>