[Help] Filter A Select Method In Angularjs.

Hyo · May 18, 2016

I need some help to learn how to filter a select method like

  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>

if any want to help me send me a pm for contact via skype for explain my example, i will pay for that help if needed.

Tessa · May 19, 2016

What do you mean by "filter"?

๖ۣۜYoung ๖ۣۜthug · May 19, 2016

I need some help to learn how to filter a select method like
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
if any want to help me send me a pm for contact via skype for explain my example, i will pay for that help if needed.

Show example what you want i will creat you the code...

As i understand you need to filter Cars and tutorials depend of their release date/model/cost corrent ?

@edit : http://plnkr.co/edit/bR1p1FnnAtnlKNYQdPPt?p=preview

Edited May 19, 2016 by DarkLess*

Hyo · May 19, 2016

First of all, i create some functions in jquery and now i try to translate it to angularjs.

From data.json i take some info and atm im trying to filter it by some ways.

Now i want to learn how to do a <select> with the genres like terror/action/blablabla, and when i select it from the <select> the view show all movies with that genre.

controllers.js

angular.module("movieApp")
.controller("movieController",function($scope,$http){
var movies = null;

//Client Side
$scope.searchText = null;	
$scope.todas = function(){
 $http.get('/movieList').success(function(data){
 $scope.movies = data;movies = data;
 }); 	
}

$scope.todas();
$scope.popular=function(){

 var copyMovies = movies;copyMovies.sort(function(movie1,movie2){
 var rate1 = new Date(movie1.imdbRating),
     rate2 = new Date(movie2.imdbRating);
if (rate2<rate1){	
	return -1;} 
else if(rate2>rate1){
		return 1;}
else{	
		return 0;
 }});
  $scope.movies = copyMovies;
  $scope.movies = $scope.movies.filter(function(movie){
  return movie.imdbRating;
  });
};

$scope.recent=function(){
 var currentYear = new Date(),
     copyMovies = movies;
copyMovies.sort(function(movie1,movie2){
 var releasedDate1 = new Date(movie1.Released),
     releasedDate2 = new Date(movie2.Released);
if (releasedDate2<releasedDate1){
	return -1;} 
else if(releasedDate2>releasedDate1){
	return 1;}
else{
	return 0;}
 });
  $scope.movies = copyMovies;
  $scope.movies = $scope.movies.filter(function(movie){
  return movie.Released;});
 };


$scope.search=function(keyEvent){
 if (keyEvent.which === 13){
var filter = $scope.iText;
var match = [];
 for (i=0; i<movies.length;i++){
  if (movies[i].Title.toLowerCase().indexOf(filter.toLowerCase())!=-1){
   match.push(movies[i]);
  }
  if (movies[i].Director.toLowerCase().indexOf(filter.toLowerCase())!=-1){
  	  match.push(movies[i]);
  }
  if (movies[i].Actors.toLowerCase().indexOf(filter.toLowerCase())!=-1){
   match.push(movies[i]);
  }
 }
  $scope.movies=match;
 }
};
//All above work is ok.
    	$scope.getGenres=function(){
    		var moviesGenre=[];
    		for(i=0; i<movies.length;i++){
    			if(moviesGenre.indexOf(movies[i].Genre)!=-1){
    				moviesGenre.push(movies[i].Genre);
    			}
    		}
    		moviesGenre;
    		alert(moviesGenre);
		};
});

i already copied my jquery function

movies.html

<section>
	<button ng-click="todas();">All</button>
	<button ng-click="popular();">Popular</button>
	<button ng-click="recent();">Recent</button>
</section>
<section>
 <input type="text" ng-model="iText" ng-keypress="search($event);" placeholder="Search a title/director/actor"/>
</section>
<section>
<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="Action">Action
    <option value="Terror">Terror
    <option value="Drama">Drama
  </select>
</form>
</section>
<div>
<div class="img" ng-repeat="movie in movies">
<ul>
<li>
<strong>ID:</strong>{{movie.id}}
<br>
<strong>Title:</strong>{{movie.Title}}
<br>
<strong>Director:</strong>{{movie.Director}}
<br>
<strong>Actors:</strong>{{movie.Actors}}
<br>
<strong>Rate:</strong>{{movie.imdbRating}}
<br>
<strong>Released:</strong>{{movie.Released}}
</li>
</ul>
</div>
</div>

Edited May 19, 2016 by Hyo

Tessa · May 19, 2016

Can you show an example of the json file?

Hyo · May 19, 2016

[{

"id": 1,

"Title": "Step Up",

"Year": "2006",

"Released": "11 Aug 2006",

"Genre": "Crime, Drama, Music",

"Director": "Anne Fletcher",

"Actors": "Channing Tatum, Jenna Dewan Tatum, Damaine Radcliff, De'Shawn Washington",

"Plot": "Tyler Gage receives the opportunity of a lifetime after vandalizing a performing arts school, gaining him the chance to earn a scholarship and dance with an up and coming dancer, Nora.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMTIxMDM5Mjc1Nl5BMl5BanBnXkFtZTcwMDkyODQzMQ@@._V1_SX300.jpg",

"imdbRating": 5

},

{

"id": 2,

"Title": "The Marine",

"Year": "2006",

"Released": "13 Oct 2006",

"Genre": "Action, Drama, Thriller",

"Director": "John Bonito",

"Actors": "John Cena, Robert Patrick, Kelly Carlson, Anthony Ray Parker",

"Plot": "A group of diamond thieves on the run kidnap the wife of a recently discharged marine who goes on a chase through the South Carolinian wilderness to retrieve her.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMTg0ODc5NzE3Nl5BMl5BanBnXkFtZTcwMDkxNzczMQ@@._V1_SX300.jpg",

"imdbRating": 8

},

{

"id": 3,

"Title": "Cars",

"Year": "2006",

"Released": "09 Jun 2006",

"Genre": "Animation, Adventure, Comedy",

"Director": "John Lasseter, Joe Ranft",

"Actors": "Owen Wilson, Paul Newman, Bonnie Hunt, Larry the Cable Guy",

"Plot": "A hot-shot race-car named Lightning McQueen gets waylaid in Radiator Springs, where he finds the true meaning of friendship and family.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMTg5NzY0MzA2MV5BMl5BanBnXkFtZTYwNDc3NTc2._V1_SX300.jpg",

"imdbRating": 1

},

{

"id": 4,

"Title": "Cow",

"Year": "2009",

"Released": "11 Sep 2009",

"Genre": "Drama",

"Director": "Hu Guan",

"Actors": "Bo Huang, Ni Yan, Hu Gao, Longyin Hu",

"Plot": "A Chinese peasant is given the responsibility of protecting his village's special dairy cow during a particularly harsh winter in 1940.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BODIyNDJlMWQtYzc1Yy00N2I5LTg0YWEtZDMyYjRjMjA5OGE1XkEyXkFqcGdeQXVyMjg0MTI5NzQ@._V1_SX300.jpg",

"imdbRating": 3

},

{

"id": 5,

"Title": "Underworld",

"Year": "2003",

"Released": "19 Sep 2003",

"Genre": "Action, Fantasy",

"Director": "Len Wiseman",

"Actors": "Kate Beckinsale, Scott Speedman, Michael Sheen, Shane Brolly",

"Plot": "Selene, a beautiful warrior, is entrenched in a war between the vampire and werewolf races. Although she is aligned with the vampires, she falls in love with Michael, a human who is sought by werewolves for unknown reasons.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNDExNDEyMV5BMl5BanBnXkFtZTcwODY1OTkxMw@@._V1_SX300.jpg",

"imdbRating": 6

},

{

"id": 6,

"Title": "The Simpsons Movie",

"Year": "2007",

"Released": "27 Jul 2007",

"Genre": "Animation, Adventure, Comedy",

"Director": "David Silverman",

"Actors": "Dan Castellaneta, Julie Kavner, Nancy Cartwright, Yeardley Smith",

"Plot": "After Homer accidentally pollutes the town's water supply, Springfield is encased in a gigantic dome by the EPA and the Simpson family are declared fugitives.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMTgxMDczMTA5N15BMl5BanBnXkFtZTcwMzk1MzMzMw@@._V1_SX300.jpg",

"imdbRating": 2

},

{

"id": 7,

"Title": "The Exorcism of Emily Rose",

"Year": "2005",

"Released": "09 Sep 2005",

"Genre": "Drama, Horror, Thriller",

"Director": "Scott Derrickson",

"Actors": "Laura Linney, Tom Wilkinson, Campbell Scott, Jennifer Carpenter",

"Plot": "A lawyer takes on a negligent homicide case involving a priest who performed an exorcism on a young girl.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMTI2NTM5MjQ0Nl5BMl5BanBnXkFtZTcwNDAxNjAzMQ@@._V1_SX300.jpg",

"imdbRating": 7

},

{

"id": 8,

"Title": "Gone Girl",

"Year": "2014",

"Released": "03 Oct 2014",

"Genre": "Crime, Drama, Mystery",

"Director": "David Fincher",

"Actors": "Ben Affleck, Rosamund Pike, Neil Patrick Harris, Tyler Perry",

"Plot": "With his wife's disappearance having become the focus of an intense media circus, a man sees the spotlight turned on him when it's suspected that he may not be innocent.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMTk0MDQ3MzAzOV5BMl5BanBnXkFtZTgwNzU1NzE3MjE@._V1_SX300.jpg",

"imdbRating": 10

},

{

"id": 9,

"Title": "Sing",

"Year": "1989",

"Released": "31 Mar 1989",

"Genre": "Drama",

"Director": "Richard Baskin",

"Actors": "Lorraine Bracco, Peter Dobson, Jessica Steen, Louise Lasser",

"Plot": "A teen film about an Italian punk forced to work with an innocent Jewish girl.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMjE4Mzc3MjI3OF5BMl5BanBnXkFtZTcwMDE3MDkwMw@@._V1_SX300.jpg",

"imdbRating": 12

},

{

"id": 10,

"Title": "Ring",

"Year": "1999",

"Released": "12 Jun 1999",

"Genre": "Horror",

"Director": "Dong-bin Kim",

"Actors": "Eun-Kyung Shin, Seung-hyeon Lee, Jin-yeong Jeong, Chang-wan Kim",

"Plot": "After the mysterious death of her niece and other three teenagers on the same hour and with the symptoms of heart attack, the journalist Sun-ju decides to investigate their last moments. ...",

"Poster": "http://ia.media-imdb.com/images/M/MV5BNjBhZjUxNGMtODQ1ZC00NmQ4LWI0MGYtZWFiMTgwYmNkZmM2XkEyXkFqcGdeQXVyMzM4MjM0Nzg@._V1_SX300.jpg",

"imdbRating": 2

},

{

"id": 11,

"Title": "Jeff",

"Year": "1969",

"Released": "25 Apr 1969",

"Genre": "Crime, Drama",

"Director": "Jean Herman",

"Actors": "Alain Delon, Mireille Darc, Georges Rouquier, Gabriel Jabbour",

"Plot": "N/A",

"Poster": "http://ia.media-imdb.com/images/M/MV5BYzUyYzVhMzUtZjg0Ny00ODRlLWFlNjMtNjJkNWYxOGRjODNjXkEyXkFqcGdeQXVyMzYyNjE5NDY@._V1_SX300.jpg",

"imdbRating": 8

},

{

"id": 12,

"Title": "The Angry Video Game Nerd",

"Year": "2004",

"Released": "07 May 2004",

"Genre": "Comedy",

"Director": "N/A",

"Actors": "James Rolfe",

"Plot": "A foul-mouthed nerd reviews bad video games.",

"Poster": "http://ia.media-imdb.com/images/M/MV5BMjEzMTkzNzUzMl5BMl5BanBnXkFtZTgwMDUzNjM1MjE@._V1_SX300.jpg",

"imdbRating": 11

}

]

Tessa · May 19, 2016

Did you read this https://docs.angularjs.org/tutorial/step_04?

Edited May 19, 2016 by Tessa

Hyo · May 19, 2016

Yes, but im a little confused...

For that i decide to post it here, i need to see an example using nodejs (server side) for understand.

I dont know if i cant understand the example of angular because i already wrote all the day or because im a retard. :happyforever:

(For that i want to pay if needed, because i dont want to steal the time of a guy because i cant do the job.)

Edited May 19, 2016 by Hyo

๖ۣۜYoung ๖ۣۜthug · May 24, 2016

Yes, but im a little confused...

For that i decide to post it here, i need to see an example using nodejs (server side) for understand.

I dont know if i cant understand the example of angular because i already wrote all the day or because im a retard. :happyforever:

(For that i want to pay if needed, because i dont want to steal the time of a guy because i cant do the job.)

eh does chengre worked ?

[Help] Filter A Select Method In Angularjs.

Recommended Posts

Hyo

Tessa

๖ۣۜYoung ๖ۣۜthug

Hyo

Tessa

Hyo

Tessa

Hyo

๖ۣۜYoung ๖ۣۜthug

Join the conversation

Posts

Topics

Browse

Activity

Store