分页，自定义过滤器，AngularJS答案

【问题标题】：Paginate, custom filter, AngularJS分页，自定义过滤器，AngularJS
【发布时间】：2015-07-31 19:29:26
【问题描述】：

我正在创建一个包含一些嵌入式 html 的对象列表，并添加了一个过滤器，但如果他们看到有问题，我想把我赶出去。

这是分页的例子：PLUNKR

它应该显示一个带有分页到期并应用过滤器的列表。

angular.module('App', ['ui.bootstrap','ngResource'])
.controller('mainCtrl',['$scope',
	function($scope){
		$scope.items=[
			{id: '1', title: '<b>Chicago</b>'},
			{id: '2', title: '<b><i>New York</i></b>'},
			{id: '3', title: '<div><p>London</p></div>'},
			{id: '4', title: '<div><p>Washington</p></div>'},
			{id: '5', title: '<div><p>Hawai</p></div>'},
			{id: '6', title: '<div><p>Dinamarca</p></div>'},
			{id: '7', title: '<div><p>Peru</p></div>'},
			{id: '8', title: '<div><p>USA</p></div>'},
			{id: '9', title: '<div><p>Ecuador</p></div>'},
			{id: '10', title: '<div><p>Japon</p></div>'}
		];

		$scope.totalItems = $scope.objects.length;
		$scope.currentPage = 1;
		$scope.numPerPage = 5;

		$scope.paginate = function(value) {
			var begin, end, index;
			begin = ($scope.currentPage - 1) * $scope.numPerPage;
			end = begin + $scope.numPerPage;
			index = $scope.objects.indexOf(value);
			return (begin <= index && index < end);
		};
	}
])

.filter("htmlToPlaintext", function() {
	return function(text) {
	return text.replace(/<[^>]+>/gm, '');
	}
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="App">
	<div ng-controller="mainCtrl">
		<div ng-repeat="item in items | filter : paginate">
			{{item.title|htmlToPlaintext}}
		</div>
		<pagination total-items="totalItems" ng-model="currentPage"
	max-size="5" boundary-links="true"
	items-per-page="numPerPage" class="pagination-lg">
	</pagination>
	</div>
</div>

【问题讨论】：

他们看到了什么不对劲，我想把我赶出去。这意味着什么？具体问题是什么？您预计会发生什么以及会发生什么？
它应该显示一个带有分页到期并应用过滤器的列表。
这里提供的 plunker 工作正常
问题不是plunker，问题是sn-p
所以“
London
”需要格式化/filter 为“London”，是吗？如果是这种情况，那么您的情况下的 text.replace(......) 是不正确的。

标签： angularjs pagination

【解决方案1】：

如果我正确理解了您的问题（我确实修改了 PLUNKR ，可能是您想要剥离 html 元素而只想要其中的文本）。您的过滤器，它的编写方式，将剥离所有内容并返回“”。假设过滤器的输入将是 html 内容，并且您想要显示 html 的感知文本。

试试下面的

 .filter("htmlToPlaintext", function() {
    return function(text) {
       var htmlNode = document.createElement('div'); 
       htmlNode.innerHTML = text;
       return htmlNode.innerText;
    }
});

【讨论】：