Last active
August 29, 2015 13:56
-
-
Save francoisblarel/9249074 to your computer and use it in GitHub Desktop.
Angular filters examples from Thinkster tutorial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html > | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="bootstrap.css"> | |
| </head> | |
| <body> | |
| <div ng-app="myApp"> | |
| <div ng-controller="FirstCtrl"> | |
| <input type="text" ng-model="data.message"> | |
| <h1>{{ data.message }}</h1> | |
| </div> | |
| <div ng-controller="SecondCtrl"> | |
| <input type="text" ng-model="data.message"> | |
| <h1>{{ reversedMessage(data.message) }}</h1> | |
| <input type="text" ng-model="data.message"> | |
| <h1>{{ data.message | reverse }}</h1> | |
| </div> | |
| <div ng-controller="AvengerCtrl"> | |
| <input type="text" ng-model="searchText.$"/> | |
| <table> | |
| <tr ng-repeat="actor in avengers.cast | filter:searchText | orderBy : 'Character' | limitTo : 115 "> | |
| <td>{{actor.Name | lowercase }}</td> | |
| <td>{{actor.Character | uppercase }}</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> | |
| <script src="filters.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var myApp = angular.module('myApp', []); | |
| myApp.factory('Data', function () { | |
| return { message: "I'm data from a service" } | |
| }); | |
| myApp.filter('reverse', function(Data){ | |
| return function(text){ | |
| return text.split("").reverse().join("") + Data.message; | |
| } | |
| }) | |
| function FirstCtrl($scope, Data) { | |
| $scope.data = Data; | |
| } | |
| function SecondCtrl($scope, Data) { | |
| $scope.data = Data; | |
| $scope.reversedMessage = function(message) { | |
| return message.split("").reverse().join(""); | |
| }; | |
| } | |
| myApp.factory('Avengers', function(){ | |
| var Avengers = {}; | |
| Avengers.cast = [{ | |
| Name: "Robert Downey Jr.", | |
| Character: "Tony Stark / Iron Man" | |
| }, { | |
| Name: "Chris Evans", | |
| Character: "Steve Rogers / Captain America}" | |
| }, { | |
| Name: "Mark Ruffalo", | |
| Character: "Bruce Banner / The Hulk" | |
| }, { | |
| Name: "Chris Hemsworth", | |
| Character: "Thor" | |
| }, { | |
| Name: "Scarlett Johansson", | |
| Character: "Natasha Romanoff / Black Widow" | |
| }, { | |
| Name: "Jeremy Renner", | |
| Character: "Clint Barton / Hawkeye" | |
| }, { | |
| Name: "Tom Hiddleston", | |
| Character: "Loki" | |
| }, { | |
| Name: "Clark Gregg", | |
| Character: "Agent Phil Coulson" | |
| }, { | |
| Name: "Cobie Smulders", | |
| Character: "Agent Maria Hill" | |
| }, { | |
| Name: "Stellan Skarsgard", | |
| Character: "Selvig" | |
| }, { | |
| Name: "Samuel L. Jackson", | |
| Character: "Nick Fury" | |
| }, { | |
| Name: "Gwyneth Paltrow", | |
| Character: "Pepper Potts" | |
| }, { | |
| Name: "Paul Bettany", | |
| Character: "Jarvis (voice)" | |
| }, { | |
| Name: "Alexis Denisof", | |
| Character: "The Other" | |
| }, { | |
| Name: "Tina Benko", | |
| Character: "NASA Scientist" | |
| }]; | |
| return Avengers; | |
| }); | |
| myApp.controller('AvengerCtrl', function($scope, Avengers){ | |
| $scope.avengers = Avengers; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment