AngularJS

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

如果您将数据更改为

 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] 来获取这本书。

检查这个 fiddle jsfiddle.net/devjit/wdtk370z/5

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

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

并在 HTML

{{selectedBook.name}}

Answer 2

我在控制器中使用了嵌套的 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;
                    }
                });               
            }
        }      
   });  
});

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

AngularJS - Filter out single object in nested data structure

nested

filter

ng-repeat