[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

Link to comment

Share on other sites

Tessa

Link to comment

Share on other sites

๖ۣۜYoung ๖ۣۜthug

Link to comment

Share on other sites

Hyo

Link to comment

Share on other sites

Tessa

Link to comment

Share on other sites

Hyo

Link to comment

Share on other sites

Tessa

Link to comment

Share on other sites

Hyo

Link to comment

Share on other sites

๖ۣۜYoung ๖ۣۜthug

Link to comment

Share on other sites

Join the conversation

Posts

Topics

Browse

Activity

Store