Question

数据

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（唯一）过滤出系列的一本书。这种方法效果很好，但有更简洁的方法吗？

Answer 1

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

<强> 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;
                    }
                });               
            }
        }      
   });  
});

Answer 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"
            }
        }
    }
}
}

然后你可以做系列列表[myseriesid] .book [bookid]来获得这本书。

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

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

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

和HTML

{{selectedBook.name}}

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

2 个答案: