CODEWITHSUNDEEP
javascriptangularjs
MBehtemam
MBehtemam

Reputation: 7919

Filter list base on input model and select in Angular

According to this jsbin i have an input and a select option and a list of movies. i want when user type something in input and then select an option in select, Angular filter the list of movies.

<div ng-controller="myController">
<input type="text" ng-model="search"/>
<select>
  <option ng-repeat="item in dropdown" value="{{item}}">{{item}}</option>
</select>

<br/>
<ul>
  <li ng-repeat="movie in movies">
    Name: <strong>{{movie.name}}</strong> |
    director: <strong>{{movie.director}}</strong> |
     actor: <strong>{{movie.actor}}</strong>

  </li>
</ul>

and my controller is something like this : 

var myApp = angular.module('myApp',[]);
myApp.controller('myController',function myController($scope){

$scope.dropdown = ['name','director','actor'];

$scope.movies = [

{name:'test',director:'test di',actor:'test ac'},
 {name:'test2',director:'test2 di',actor:'test2 ac'},
 {name:'test3',director:'test3 di',actor:'test3 ac'},
 {name:'test4',director:'test4 di',actor:'test4 ac'}
];
});

Upvotes: 1

Views: 440

Answers (1)

phylax
phylax

Reputation: 2086

Your need a filter object in the ng-repeat for the movielist. Docs are here: http://docs.angularjs.org/api/ng/filter/filter.

<li ng-repeat="movie in movies | filter:filterObj">

Since the object ist dynamic i can only think of generating it on change of the input/select.

$scope.changeFilter = function () {
  $scope.filterObj = {};
  $scope.filterObj[$scope.item] = $scope.search;  
};

Your jsbin is useless unless one can see and edit the code. Here is a working fiddle

Upvotes: 2

Related Questions