Question

我遇到了问题。

我有一个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}}">&nbsp;{{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}}&nbsp;</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;
    };
});

使用唯一过滤器过滤类别，加载页面后一切正常。但是，我想在点击类别名称后按类别过滤文章。

因此，当我点击手球时，它应该只显示具有手球类别的结果。

但是，当我点击类别名称时，有关重复项的角度抛出异常。我真的不明白为什么它能够在首次加载时以独特的方式处理它们，但是在模型改变之后，它不是。

有什么建议吗？

Answer 1

好的，我解决了这个问题。有两个问题，一个是我需要在重写$ 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所以每次过滤后结果越来越少，因为它被反复过滤。我不得不创建另一个作为数据源但不被重写的变量。

所以而不是

$scope.videos = data;

我有

$scope.videos = data;
$scope.allData = data;

此外，我不得不更改onClick操作以传递allData而不是视频

 <li ng-repeat="category in categories"><a href="#" ng-click="getFilteredResults(category, allData)" class="categories-filter">&nbsp;{{category}}</a></li>

角度重复项

1 个答案: