角度重复项
Angular duplicate items
我有一个问题。
我有一个从后端到前端的 JSON。它看起来像：
{
"title": "Interrupted",
"image": "1",
"timestamp": "1403617939848",
"image" : "1",
"categories": ["News","News","Handball","Handball"]
},
我的观点是这样的：
<!doctype html>
<html class="no-js" lang="" ng-app="videoApp">
<head>
<meta charset="utf-8">
<title>Latest videos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="public">
<link rel="stylesheet" href="css/normalize.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/libraries/bootstrap.min.css">
</head>
<body ng-controller="VideoListCtrl">
<header class="col-lg-12 col-md-12 col-sm-12 text-white">
LATEST VIDEOS
<span><select class="favorite-selector">
<option value="{{category}}" ng-repeat="category in categories">{{category}}</option>
</select> <button class="btn-danger">Add to favorite</button></span>
<span class="results"></span>
</header>
<main>
<div class="category-list">
<li><a href="#" class="categories-filter" data-value="all">All videos</a></li>
<li ng-repeat="category in categories"><a href="#" ng-click="getFilteredResults(category, videos)" class="categories-filter" data-value="{{category}}"> {{category}}</a></li>
</div>
<div class="video-container" id="video-container">
<article class='col-lg-3 col-md-4 col-sm-12 col-xs-12 video' dir-paginate="video in videos | itemsPerPage: 12">
<div class='video-image'><img class='img-responsive img' src='img/{{video.image ? video.image : "1" }}.jpeg'>
<img class='player img-responsive' src='img/icon.png' width='75px' height='75px'>
</div>
<p class='video-title'><strong>{{video.title}}</strong></p>
<p class='video-timestamp'>{{video.timestamp}}</p>
<span class='categories'>
<li ng-repeat="categ in video.categories | unique">{{categ}} </li>
</span>
</article>
</div>
<div class="col-lg-offset-2 col-lg-8">
<dir-pagination-controls></dir-pagination-controls>
</div>
</main>
<script src="js/angular/angular.js"></script>
<script src="js/angular/ui-utils.js"></script>
<script src="js/libraries/underscore.js"></script>
<script src="js/controllers/VideoListCtrl.js"></script>
<script src="js/filters/CategoryFilter.js"></script>
<script src="js/filters/ArticleFilter.js"></script>
<script src="js/angular/dirPagination.js"></script>
</body>
</html>
控制器：
var videoApp = angular.module('videoApp', ['videoAppFilters', 'ui.unique', 'angularUtils.directives.dirPagination']);
videoApp.controller('VideoListCtrl', function ($scope, $http, $filter) {
$http.get('http://academy.tutoky.com/api/json.php').success(function (data) {
$scope.videos = data;
$scope.categories = $filter('categoryFilter')(data);
});
$scope.getFilteredResults = function (category, data) {
$scope.videos = $filter('articleFilter')(category, data);
return $scope.videos;
};
});
文章过滤器：
angular.module('videoAppFilters').filter('articleFilter', function () {
return function (category, data) {
var filteredData = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].categories.length; j++) {
if (data[i].categories[j] == category) {
filteredData.push(data[i]);
}
}
}
return filteredData;
};
});
类别使用独特的过滤器进行过滤，加载页面后一切正常。但是，我想在单击类别名称后按类别过滤文章。
因此，例如，当我单击手球时，它应该只显示具有手球类别的结果。
但是，当我单击类别名称时，角度抛出有关重复项的异常。我真的不明白为什么它能够在第一次加载时以独特的方式处理它们，但在模型更改后，它不是。
有什么建议吗？
好的，我解决了这个问题。有两个问题，一个是我需要在重写该$scope.videos后再次删除重复项，因为第二次类别中的唯一过滤器没有继续（不知道为什么）。
我是这样做的：
$scope.getFilteredResults = function (category, data) {
$scope.videos = $filter('articleFilter')(category, data);
return $scope.videos;
};
并添加独特的视频 ng-重复喜欢
<article class='col-lg-3 col-md-4 col-sm-12 col-xs-12 video' dir-paginate="video in videos | unique | itemsPerPage: 12">
另一个问题是我正在重写$scope.videos，所以每次过滤后的结果越来越少，因为它被一遍又一遍地过滤。我必须创建另一个变量，该变量用作数据源，但未重写。
所以而不是
$scope.videos = data;
我有
$scope.videos = data;
$scope.allData = data;
此外，我还必须更改onClick操作以传递所有数据而不是视频
<li ng-repeat="category in categories"><a href="#" ng-click="getFilteredResults(category, allData)" class="categories-filter"> {{category}}</a></li>
相关文章：
- 没有找到相关文章
