javascript - 使用所选的选择选项使用 angularjs 解析 JSON

Question

我有两个 url，我在其中调用两个 json 对象。

作者.json

[
    {
    "id":"1",
    "name":"Dan Brown",
    },
    {
    "id":"2",
    "name":"Steve Gates",
    }
]

books.js

[
    {
    "id":"1",
    "author_id":"1",
    "bookname":"Advance Programming"
    },
    {
    "id":"2",
    "author_id":"1",
    "bookname":"Advanced Programming"
    },
    {
    "id":"3",
    "author_id":"1",
    "bookname":"C++ involved beyond 1"
    },
    {
    "id":"4",
    "author_id":"1",
    "bookname":"C++ involved beyond 2"
    },
    {
    "id":"5",
    "author_id":"2",
    "bookname":"C++ involved beyond 3"
    },
    {
    "id":"6",
    "author_id":"2",
    "bookname":"Java involved beyond"
    }
]

我想要实现的是从所选下拉列表中显示所选作者的所有书籍的列表。

到目前为止，我的 HTML 看起来像这样。

<div ng-controller="authorSelectController">
    <select class="form-control" id="authors" ng-model="selectedAuthor">
        <option value="0" selected="selected">- Select Author -</option> 
        <option ng-repeat="author in authors" value="{{author.id}}">{{author.name}}</option>
    </select>

    <div ng-model="showBooks">
        //Show a list of books here
    </div>
</div>

我的 JS Controller .js

var myApp = angular.module('myApp', []);

myApp.controller('authorSelectController', ['$scope', '$http', function($scope, $http) {
    $http.get('../assets/js/data/authors.json').success(function(data) {
        $scope.authors = data;
    });
}]);

目前，作者从 json 中进行填充，但是我不确定如何从这里开始实现我想要做的事情。

感谢您的阅读。

Answer 1

您可以使用filter

 <div ng-repeat="book in books | filter:{'author_id':selectedAuthor}">
        {{book.id}} :: {{book.bookname}}
 </div>

在上面的代码中，books 是所有书籍的数组，selectedAuthor 是所选作者 ID。

工作 fiddle :https://jsfiddle.net/U3pVM/14411/

编辑:如果您还想显示作者姓名，一种方法是将authorName全局存储在一个变量中，并在下拉值更改时使用ng-change进行更新。 .
fiddle :https://jsfiddle.net/U3pVM/14415/