Question

我有以下自定义过滤器，它会在一定数量的字符后截断文本：

test.app.filter('cut', function () {
return function (value, wordwise, max, tail) {
    if (!value) return '';

    max = parseInt(max, 10);
    if (!max) return value;
    if (value.length <= max) return value;

    value = value.substr(0, max);
    if (wordwise) {
        var lastspace = value.lastIndexOf(' ');
        if (lastspace != -1) {
            value = value.substr(0, lastspace);
        }
    }

    return value + (tail || ' …');
};
});

如果我将它应用于ng-options，它不起作用 - 下拉列表中的选项消失：

<select name="country" class="form-control" ng-options="country.value as country.label for country in countries | cut:true:20:' ...'" ng-model="address.Country" placeholder="{{'Country' | r | xlat}}" ng-required="address.IsCustEditable != false" ng-disabled="address.IsCustEditable == false" />

虽然在其他元素中很有用，例如：

  <strong>{{v.ExternalID | cut:true:20:' ...'}}</strong>

我做错了什么？

Answer 1

当你想要一个字符串时，你正在将一个对象传递给过滤器。

这就是为什么当你这样做的时候：

<strong>{{v.ExternalID | cut:true:20:' ...'}}</strong>

有效。如果你这样做了：

<strong>{{v | cut:true:20:' ...'}}</strong>

你会遇到类似的问题。

您可以将过滤器重写为take和object，如下所示：

test.app.filter('cut', function () {
return function (obj, wordwise, max, tail) {

    var value = obj.label || obj ;

    if (!value) return '';

    max = parseInt(max, 10);
    if (!max) return value;
    if (value.length <= max) return value;

    value = value.substr(0, max);
    if (wordwise) {
        var lastspace = value.lastIndexOf(' ');
        if (lastspace != -1) {
            value = value.substr(0, lastspace);
        }
    }

    return value + (tail || ' …');
};
});

但如果希望过滤器处理多个对象结构，那就会变得有点混乱。

您还可以重写ng-options语句。我总觉得ng-options dsl有点尴尬。以下是我认为你可以写这个的几种方法，但可能需要一些修补才能使它正确。这个想法仍然是相同的，你需要将字符串输入过滤器，而不是对象：

country.value as country.label for country in countries | cut:country.label:true:20:' ...'

或者像这样

country.value as (country.label | cut:true:20:' ...') for country in countries

坚持使用AngularJS过滤器

1 个答案: