Javascript 角度重复项
我有个问题 我有一个从后端到前端的JSON提交。它看起来像：Javascript 角度重复项,javascript,angularjs,Javascript,Angularjs,我有个问题 我有一个从后端到前端的JSON提交。它看起来像： { "title": "Interrupted", "image": "1", "timestamp": "1403617939848", "image" : "1", "categories": ["News","News","Handball","Handball"] }, <!doctype html> <html class="no-js" lang="" ng
{
"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>
{
"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>
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;
};
});
angular.module（'videoAppFilters'）.filter（'articleFilter'，function（）{
返回函数（类别、数据）{
变量filteredData=[]；
对于（变量i=0；i有什么建议吗？好的，我解决了这个问题。有两个问题，一个是我需要在重写$scope.videos后再次消除重复项，因为中类别中的第二次唯一筛选没有继续（不知道为什么） 我是这样做的：
$scope.getFilteredResults = function (category, data) {
$scope.videos = $filter('articleFilter')(category, data);
return $scope.videos;
};
<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 = data;
$scope.allData = data;
<li ng-repeat="category in categories"><a href="#" ng-click="getFilteredResults(category, allData)" class="categories-filter"> {{category}}</a></li>