CODEWITHSUNDEEP
angularjs
user3438917
user3438917

Reputation: 497

Trouble filtering table data with angular filter

I have an app that displays a list of movies from a JSON data source, which looks like this:

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

The controller is setup like this:

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;
    });
});

and markup for the table and text inputs to filter both movie Names and the Actors in movies:

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

Not sure how to hookup the filter functionality so that I can type in a name, and filter by name input or type in an actors name, and display all movies with that actor in the name.

I can currently see the movie Names and Actors, however that actors are showing with their array brackets which needs to be displayed without them:

enter image description here

Upvotes: 1

Views: 61

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You can do this, Have a ng-model for the actors input box,

 <input ng-model="actor" type="text" class="form-control" id="actors" placeholder="Actors">

Iterate over the child array inside the movie, and add the filter 'actor'

  <tr ng-repeat="movies in results ">
              <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>

WORKING DEMO APP

Upvotes: 1

Related Questions