用$filter创建和使用新的“过滤器”

Question

在阅读利用AngularJS掌握网络开发时，我尝试创建和使用一个使用$filter模块/关键字的新过滤器。

<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项目的第一个字符($scope.backlog)出现。但是它似乎打印出了$scope.backlog中第一个项目的第一个字符，这对我来说是没有意义的。

http://jsfiddle.net/9Q6Sk/

Answer 1

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

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

    <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不工作的原因。您有角1.0.1作为外部依赖项，它否决了1.2.1。1.0.1不包括limitTo过滤器。

查看这个小提琴以获得一个有用的示例

Answer 2

首先要注意的是，您希望限制中的每个backlog项，因此不应该在ngRepeat指令上使用过滤器。需要注意的第二件事是，当查看limitToFilter函数的语法时，您将看到以下内容：

function (array, limit) {
    if (!(array instanceof Array)) return array;
    limit = int(limit);
    var out = [],
      i, n;

    // check that array is iterable
    if (!array || !(array instanceof Array))
      return out;

    // if abs(limit) exceeds maximum length, trim it
    if (limit > array.length)
      limit = array.length;
    else if (limit < -array.length)
      limit = -array.length;

    if (limit > 0) {
      i = 0;
      n = limit;
    } else {
      i = array.length + limit;
      n = array.length;
    }

    for (; i<n; i++) {
      out.push(array[i]);
    }

    return out;
  } 

可以清楚地看到，该函数是在数组类型上操作的，而不是字符串类型。因此，简单地说，您必须编写自己的过滤机制来限制您想要的字符串。

更新

实际上，我试着让它与ngRepeat和所有的东西一起工作:看看这个jsFiddle