AngularJS - 过滤掉嵌套数据结构中的单个对象答案

【问题标题】：AngularJS - Filter out single object in nested data structureAngularJS - 过滤掉嵌套数据结构中的单个对象
【发布时间】：2015-08-21 04:14:15
【问题描述】：

数据

var data = {
    "records": [
        {
            "name": "Spectrum Series",
            "seriesid": "SpectrumSeries",
            "book": [
                {
                    "name": "White Curse",
                    "bookid": "WhiteCurse",
                    "image": "book1"                    
                },
                {
                    "name": "Blue Fox",
                    "bookid": "BlueFox",
                    "image": "book2"                   
                }
            ]

    … other series
        }

控制器

dnleoApp.controller('BookCtrl', function ($scope, $routeParams) {
    $scope.mybookid = $routeParams.bookid;
    $scope.myseriesid = $routeParams.seriesid;
    $scope.serieslist = data.records;
    $scope.compareSeriesID = function($series) {
        return $series.seriesid == $scope.myseriesid;
    };
    $scope.compareBookID = function($book) {
        return $book.bookid == $scope.mybookid;
    };

});

html

<div ng-repeat="series in serieslist | filter: compareSeriesID">
    <ul ng-repeat="book in series.book | filter: compareBookID">
        <li>{{book.name}}</li>
    </ul>
</div>

我使用带有过滤器的嵌套 ng-repeat 使用来自 url 的 seriesid（唯一）和 bookid（唯一）过滤出一个系列的单本书。这种方法效果很好，但有更清洁的方法吗？

【问题讨论】：

是的，或者当然：而不是从后端加载所有系列和所有系列的所有书籍，而实际上你只关心一个系列的一本书，只加载那本书和那个来自后端的串行。即使使用您的策略，我也不会在视图中使用循环来显示信息。相反，我会在控制器中执行此操作，并将书籍和系列存储在视图的范围内。
感谢您的建议。按照您的建议，我使用嵌套的 forEach 在控制器中将其过滤掉。 :)

标签： angularjs filter nested ng-repeat

【解决方案1】：

我在控制器中使用嵌套的 forEach 来过滤出 book 对象并将其分配给范围变量。

HTML

<div>{{selectedbook.name}}</div>

控制器

dnleoApp.controller('BookCtrl', function ($scope, $routeParams) {
    $scope.mybookid = $routeParams.bookid;
    $scope.myseriesid = $routeParams.seriesid;
    $scope.serieslist = data.records;
    var keepGoing=true;
   angular.forEach($scope.serieslist, function(series){      
       if(keepGoing) {
            if(series.seriesid == $scope.myseriesid){
                angular.forEach(series.book, function(book){
                    if(book.bookid == $scope.mybookid){                         
                        $scope.selectedbook = book;                            
                        keepGoing = false;
                    }
                });               
            }
        }      
   });  
});

【讨论】：

【解决方案2】：

如果您将数据更改为

 var data = {
"records": {
    "SpectrumSeries": {
        "name": "Spectrum Series",
        "seriesid": "SpectrumSeries",
        "book": {
            "book1": {
                "name": "White Curse",
                "bookid": "WhiteCurse",
                "image": "book1"
            },
            "book2": {
                "name": "Blue Fox",
                "bookid": "BlueFox",
                "image": "book2"
            }
        }
    },
    "Series2": {
        "name": "Spectrum Series",
        "seriesid": "SpectrumSeries",
        "book": {
            "book1": {
                "name": "White Curse",
                "bookid": "WhiteCurse",
                "image": "book1"
            },
            "book2": {
                "name": "Blue Fox",
                "bookid": "BlueFox",
                "image": "book2"
            }
        }
    }
}
}

然后你可以做 serieslist[myseriesid].book[bookid] 来获取这本书。

检查这个小提琴 jsfiddle.net/devjit/wdtk370z/5

或者您可以在控制器中设置所选书籍，例如

    $scope.selectedBook = data.record[$routeParams.seriesid].book[$routeParams.bookid];

在 HTML 中

{{selectedBook.name}}

【讨论】：

我试过了，对我来说它有效..检查这个小提琴jsfiddle.net/devjit/wdtk370z/5。
是的，现在可以了。在您最初的建议中，它只是“serieslist[myseriesid][bookid]”