Jump to content

[Help] Filter A Select Method In Angularjs.


Recommended Posts

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.

Link to comment
Share on other sites

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 by DarkLess*
Link to comment
Share on other sites

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 by Hyo
Link to comment
Share on other sites


[{

"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

}

]

Link to comment
Share on other sites

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 by Hyo
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...

AdBlock Extension Detected!

Our website is made possible by displaying online advertisements to our members.

Please disable AdBlock browser extension first, to be able to use our community.

I've Disabled AdBlock