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

【问题标题】：Filtering angular table results by value selected in dropdown menu按下拉菜单中选择的值过滤角度表结果
【发布时间】：2016-09-11 23:12:19
【问题描述】：

给定一个 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;
        });

     }]);

这是当前工作的带有下拉菜单的插件：

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

【问题讨论】：

标签： angularjs json

【解决方案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>

【讨论】：

【解决方案2】：

为了使流派过滤器按预期工作，您的代码有很多变化，因此我为此创建了一个Plunker。我已经将您编写以显示流派列表的方式从ng-repeat 更改为@ 987654323@.

我们仍然可以改进其余的过滤过程，但我只是根据上下文回答了。

【讨论】：