javascript - 通过 $filter 创建和使用新的 `filter`

Question

阅读Mastering Web Development with AngularJS ，我正在尝试创建并使用一个使用 $filter 模块/关键字的新过滤器。

HTML

<div ng-controller="MyCtrl"> 
    <table>
        <thead>
            <th>Name</th>
            <th>Description</th>
        </thead>
        <tbody>
            <tr ng-repeat="item in backlog | trim:4">
                <td>{{item}}</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

angular.module("myApp", [])
.filter("trim", function($filter) {
    var limitToFilter = $filter("limitTo");

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

function MyCtrl($scope) {
    $scope.backlog = ["asdfasdf", "BBBBBBBBB", "CCCCCCC", 
                     "DDDDDDD", "EEEE"];
}

我希望显示每个 $scope.backlog 项的第一个字符 (4-3 = 1)。但它似乎打印出了 $scope.backlog 中第一项的第一个字符，这对我来说没有意义。

http://jsfiddle.net/9Q6Sk/

Answer 1

我能够让您的代码正常工作，但没有使用内置的 limitTo 过滤器。这可能是 1.2.1 版本的 Angular 的一个错误，但我可以让它在他们的示例中工作。我将进一步调查。

我对您的代码所做的第一个更改是将过滤器从 ng-repeat 移至实际项目。根据您的描述，您需要每个 backlog 项目的第一个字符，而不是第一个 backlog 项目。

HTML

    <tr ng-repeat="item in backlog">                
        <td>{{ item | trim:4 }}</td>            
    </tr>

JavaScript

angular.module("myApp", []).filter("trim", function($filter) {

    return function(input, limit) {
    if(input.length > limit) {
        return $filter('limitTo')(input, limit-3);
    }
        return input;
    };
});

我将继续调查为什么 limitTo 不起作用，即使只是单独应用也是如此。

更新

我找到了 limitTo 不起作用的原因。您将 Angular 1.0.1 作为外部依赖项，从而覆盖了 1.2.1。 1.0.1 不包含 limitTo 过滤器。
看看这个fiddle一个工作示例