0
JSONデータのテーブルを指定すると、ユーザがドロップダウンメニューから選択したムービージャンルに基づいて結果をフィルタリングできる必要があります。私は現在、各映画のすべてのジャンルを取り込んでいますが、各ジャンルを利用できるようにする必要があります。ドロップダウンメニューで値を選択して角度テーブルの結果をフィルタリングする
ここでJSONのサンプルです：
{
Rank: 1,
Duration: "1 hr. 47 min.",
Description: "The Friedmans are a seemingly typical, upper-middle-class Jewish family whose world is instantly transformed when the father and his youngest son are arrested and charged with shocking and horrible crimes. Caught up in hysteria and with their community in an uproar, the family undergoes a media onslaught. The film inquires not just into the life of a family but into a community, a legal system, and an era.",
Director: "Andrew Jarecki",
Genres: [
"Documentary",
"Special Interest"
],
Actors: [
"Arnold Friedman",
"Elaine Friedman",
"David Friedman",
"Seth Friedman",
"Jesse Friedman",
"Howard Friedman",
"John McDermott",
"Frances Galasso",
"Anthony Sgueglia",
"Detective Frances Ga...",
"Joseph Onorato",
"Judd Maltin",
"Judge Abbey Boklan",
"Ron Georgalis",
"Scott Banks",
"Debbie Nathan",
"Jerry Bernstein",
"Peter Panaro",
"Lloyd Doppman",
"Jack Fallin"
],
Id: 605,
Name: "CAPTURING THE FRIEDMANS (2003)"
}
は、ここにマークアップです：
<body ng-app='myApp' ng-controller='MyController'>
<div class="col-lg-12">
<div class="form-inline col-lg-4">
<div class="form-group">
<label for="Name">Search by movie title</label>
<input ng-model="movie" type="text" class="form-control" id="name" placeholder="Title">
</div>
<div class="form-group">
<label for="Actor">Search by actors</label>
<input ng-model="actor" type="text" class="form-control" id="actors" placeholder="Actors">
</div>
</div>
<label for="genres">Search by genre</label>
<select class="form-control" ng-init="cc={Genres: ''}">
<option ng-repeat="movies in results" value="{{movies.Genres}}" ng-model="cc.movies">{{movies.Genres}}</option>
</select>
<table class="table-striped col-lg-8">
<thead>
<td width="15%">Name</td>
<td width="30%">Actors</td>
<td width="10%"></td>
</thead>
<tr ng-repeat="movies in results | filter:Genres">
<td>{{movies.Name}}</td>
<td><li ng-repeat="laptop in movies.Actors | filter:actor" >
<span ng-bind="laptop"></span>
</li></td>
<td>{{movie.Name}} <a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a></td>
</tr>
</table>
</div>
とコントローラ：
app.controller("MyController", ["$scope","$http",
function($scope, $http) {
$http.get('test.json').then(function (response){
console.log(response);
$scope.results = response.data;
});
}]);
ここで現在の作業plunkerですドロップダウン：
https://plnkr.co/edit/fqJt7pqTc9XKgjgDuGjd?p=preview