阅读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
中第一项的第一个字符,这对我来说没有意义。
最佳答案
我能够让您的代码正常工作,但没有使用内置的 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一个工作示例
关于javascript - 通过 $filter 创建和使用新的 `filter`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20958778/