使用角度过滤器过滤表数据

时间:2016-09-11 04:13:53

标签: angularjs

我有一个应用程序,显示来自JSON数据源的电影列表,如下所示:

{
Rank: 1,
Duration: "155 min",
Description: "When a Roman general is betrayed and his family murdered by an emperor's corrupt son, he comes to Rome as a gladiator to seek revenge.",
Director: "Ridley Scott",
Genres: [
"Action",
"Drama"
],
Actors: [
"Russell Crowe",
"Joaquin Phoenix",
"Connie Nielsen",
"Oliver Reed",
"Richard Harris",
"Derek Jacobi",
"Djimon Hounsou",
"David Schofield",
"John Shrapnel",
"Tomas Arana",
"Ralf Moeller",
"Spencer Treat Clark",
"David Hemmings",
"Tommy Flanagan",
"Sven-Ole Thorsen"
],
Id: 318,
Name: "Gladiator"
}

控制器设置如下:

var myMovies = angular.module('movieapp', []);
myMovies.controller('movieController', function($scope, $http){
  $http.get("url-to-datasource")
    .success(function(response) {
      console.log(response);
      $scope.results = response;
    });
});

和用于过滤电影名称和电影中的演员的表和文本输入的标记:

<div class="form-inline">
      <div class="form-group">
        <label for="Name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Title">
      </div>
      <div class="form-group">
        <label for="Actor">Actors</label>
        <input type="text" class="form-control" id="actors" placeholder="Actors">
      </div>
    </div>
    <table class="table-striped">
      <thead>
        <td width="15%">Name</td>
        <td width="30%">Actors</td>
        <td width="10%"></td>
      </thead>
    <tr ng-repeat="movies in results | filter: name || actors">
          <td>{{movies.Name}}</td>
          <td>{{movies.Actors}}</td>
          <td>{{movie.Name}} <a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a></td>
    </tr>
  </table>

不确定如何连接过滤器功能,以便我可以输入名称,按名称输入过滤或输入演员名称,并在名称中显示该演员的所有电影。

我现在可以看到电影名称和演员,但演员们正在使用他们的数组括号显示,而不需要它们显示:

enter image description here

1 个答案:

答案 0 :(得分:1)

你可以这样做, 有一个演员输入框的ng模型,

MyClass myClass;
// ...
MyObj myObj;

for(unsigned int i; i < myClass.getMyObjArraySize(); i++) {
    myObj = myClass.getMyObjElementAt(i);
    // do stuff
}

迭代影片中的子数组,并添加过滤器 <input ng-model="actor" type="text" class="form-control" id="actors" placeholder="Actors">

'actor'

WORKING DEMO APP