通過在下拉菜單中選擇的值過濾角度表結果

給定一個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

來源

2016-09-11 user3438917

您需要，一旦你從你的http.get要求獲得JSON數據返回到所有創造獨特風格的列表。我使用Lodash功能來簡化代碼

... 
$scope.results = response.data 
$scope.genres = []; 

//Go through every movie 
_.forEach($scope.results, function(result) { 

    //Go through each genre for every movie 
    _.forEach(result.Genres, function(genre) { 

     // Add new unique genre to the list 
     if (!_.includes($scope.genres, genre) { 
      $scope.genres.push(genre); 
     } 
    }); 
});

那麼你的NG-重複更改爲：

<option ng-repeat="genre in genres" value="{{genre}}">{{genre}}</option>

來源

2016-09-12 04:36:57 Passersby

有一點在你的代碼了很大的變化作出流派過濾器，以達到預期效果，所以我爲此做了一個Plunker。我改變了你編寫的顯示類型列表的方式，從ng-repeat到ng-options。

我們仍然可以改進其餘的過濾過程，但我已經回答了上下文。

來源

2016-09-12 08:05:22

通過在下拉菜單中選擇的值過濾角度表結果

回答

相關問題