Dieses Mal zeige ich Ihnen, wie Sie AngularJSFilter verwenden, um Filter anzupassen, um die ng-repeat-Deduplizierung zu steuern, und wie Sie AngularJS bedienen, um Filter zu verwenden, um Filter anzupassen, um ng-repeat-Deduplizierung zu steuern. Wiederholen Sie dies. Was sind die wichtigen Vorsichtsmaßnahmen? Nachfolgend finden Sie praktische Fälle, schauen wir uns diese gemeinsam an.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> ng-repeat去除重复</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in items | unique:'id'">
{{x.id}}---{{x.name}}
</p>
</p>
<script>
//AngularJs 自定义过滤器
//1.使用过滤器，去除重复
angular.module('common', []).filter('unique', function () {
return function (collection, keyname) {
console.info(collection);
console.info(keyname);
var output = [],
keys = [];
angular.forEach(collection, function (item) {
var key = item[keyname];
if (keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
}
});
var app = angular.module('myApp', ['common']);
app.controller('myCtrl', function ($scope) {
//$scope.items = [1, 2, 3,2];
//当前unique 的过滤只针对，对象数组过滤
$scope.items = [
{ id: 1, name: 'zhangsan' },
{ id: 2, name: 'lisi' },
{ id: 1, name: 'zhangsan' },
];
});
</script>
</body>
</html>Operationsergebnisse:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Anderem Verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie das Bildanzeige-Plug-in highslide.js in jQuery
So implementieren Sie es Scrollen Sie zur Seite in Vue. Unbegrenztes Laden von Daten unten
Das obige ist der detaillierte Inhalt vonSo bedienen Sie AngularJS und verwenden den benutzerdefinierten Filter Filter, um die NG-Repeat-Deduplizierung zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
