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"];
}

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

http://jsfiddle.net/9Q6Sk/

Answer 1

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

我对您的代码所做的第一个更改是将过滤器从ng-repeat移动到实际项目。根据您的描述，您需要每个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以获取工作示例

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

使用$ filter创建和使用新的`filter`

2 个答案: