Question

给定一个JSON数据表，我需要能够根据用户从下拉菜单中选择的电影类型来过滤结果。我目前已经将每部电影中的所有类型都拉入，但只需要提供每种类型，只显示一次。

以下是JSON的示例：

$route['default_controller'] = 'home/home';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

// All custom routs go below this line.

$route['contact'] = 'pages/contact';

这是标记：

{
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>

这是当前正在使用的下拉列表：

https://plnkr.co/edit/fqJt7pqTc9XKgjgDuGjd?p=preview

Answer 1

一旦从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-repeat更改为：

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

Answer 2

你的代码中有很多变化让类型过滤器按预期工作，所以我为此做了Plunker。我改变了你从{{1}显示类型列表的方式转到ng-repeat。

我们仍然可以改进其余的过滤流程，但我已经回答了上下文。

按下拉菜单中选择的值过滤角度表结果

2 个答案: