自定义一个用户Email长度超过12个字符后值截取前12个然后添加“...”显示。
例如：
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/uikit.css"/>
<link rel="stylesheet" href="../css/my-uikit.css"/>
</head>
<body>
<div class="uk-panel" ng-controller="UserCtrl">
<table class="uk-table uk-table-hover uk-table-striped">
<thead>
<tr class="uk-bg-primary">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody ng-repeat="user in users " class="uk-text-success">
<tr>
<td>{{user.name }}</td>
<td>{{user.email | subStrFilter:12}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="index.js"></script>
</html>
定义的filter名称为：subStrFilter,注意function(limitToFilter),limitTo表示angular内置的limitTo过滤器，我们自定义的过滤器依赖与limitTo过滤器，参数input表示被过滤的字段值，limit表示最大长度，使用方式：
<td>{{user.email | subStrFilter:12}}</td>
index.js
var myApp = angular.module(‘myApp‘, []);
myApp.filter(‘subStrFilter‘, function(limitToFilter){
return function(input, limit){
if(input.length>limit){
return limitToFilter(input,limit-3)+‘...‘;
}
return input;
};
});
myApp.controller(‘UserCtrl‘, [‘$scope‘, function($scope){
$scope.users = [
{
name:‘张三‘,
email:‘[email protected]‘
},
{
name:‘李四‘,
email:‘[email protected]‘
},
{
name:‘王五‘,
email:‘[email protected]‘
}
];
}]);
时间： 2024-10-28 14:42:20