具有条件角js的ng-repeat过滤器答案

【问题标题】：ng-repeat filter with condition angular js具有条件角js的ng-repeat过滤器
【发布时间】：2015-06-24 14:32:54
【问题描述】：

这是我的代码：

 <option ng-repeat="name in names" value="{{names.name}">
    {{names.name | limitTo:10 }}
 </option>

如何添加条件：

if( names.name.length > 10) { 
     //add ... point after name displayed 
}

得到结果<option value="Alexander Bradley">Alexander ... </option>

有什么想法吗？

【问题讨论】：

我很好奇你为什么要限制名称的长度。如果是因为你只有这么多的宽度，我会用 css 代替。
一个类似的问题，下面有答案 stackoverflow.com/questions/18095727/…
类似问题，结果如下链接 stackoverflow.com/questions/18095727/…

标签： javascript angularjs angularjs-ng-repeat angular-filters

【解决方案1】：

您可以创建自己的过滤器来执行此操作，并根据需要包含长度参数。

.filter("ellipses", function () {
    return function (item) {
        if (item.length > 10) {
            return item.substring(0, 10) + " ..."
        }
        return item;
    };
});

<option ng-repeat="name in names" value="{{names.name}">
    {{names.name | ellipses }}
</option>

您也可以包含长度参数，甚至使用limitTo 本身：

.filter("ellipses", ["$filter", function ($filter) {
    return function  (item, limit) {
        if (item.length > limit) {
            return $filter("limitTo")(item, limit) + " ...";
        }
        return item;
    };
}]);

【讨论】：

这是正确的答案，尽管您可能会提供有关如何设置过滤器的更多信息，因为 OP 可能不知道。

【解决方案2】：

我认为这就是您所要求的。将名称限制为 10 个字符，如果超过 10 个字符，则在其末尾添加“...”。我就是这样做的。（还修复了一些语法错误）。

<option ng-repeat="name in names" value="{{name}}">
    {{name.length <= 10 ? name : name.substring(0, 10) + "..."}}
</option>

【讨论】：