Your SlideShare is downloading. ×
Criando um componente de busca com AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Criando um componente de busca com AngularJS

1,420

Published on

A ideia é bem simplesmente criar um componente de busca que seja utilizado com qualquer controller.

A ideia é bem simplesmente criar um componente de busca que seja utilizado com qualquer controller.

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,420
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Componente de Busca com AngularJS Autor: Douglas Lira https://github.com/douglaslira/angularjs douglas.lira.web@gmail.com | angularjs-br@googlegroups.com Ajude a compartilhar conhecimento!!
  • 2. 1 – A idéia Simplesmente criar um componente de busca que seja utilizado com qualquer controller. 2 – Ferramentas AngularJS - http://angularjs.org/ 3 – Mão na massa!!
  • 3. 1 – Arquivo index.html – index.html <html ng-app="App"> <head> <linkhref="css/bootstrap.min.css" rel="stylesheet" /> <script src="js/libs/angular.min.js"></script> <script src="js/search.js"></script> <script src=”js/UserController.js”></script> </head> <body> <div ng-controller="UserController" style="margin: 20px"> <h1>Pesquisar por usuário</h1> <search-box search-text="userSearchText" search-for="searchForUser"></search-box> <search-results search-for="searchForUser" search-results="userSearchResults" search-text="userSearchText"> </search-results> </div> </body> </html> 2 – Arquivo search.js – js/search.js angular.module("App", []).directive('searchBox', function() { return { restrict: 'E', transclude: false, scope: { searchText: '=', searchFor: '=' }, controller: function($scope) { $scope.localSearchText = ''; $scope.clearSearch = function() { $scope.searchText = ""; $scope.localSearchText = ""; }; $scope.doSearch = function() { $scope.searchText = $scope.localSearchText; }; }, replace: true, template: '<form>' + '<div>' + '<input ng-model="localSearchText" type="text" />' + '</div>' + '<div>' + '<button ng-click="clearSearch()" class="btn btn-small">Limpar</button>' + '<button ng-click="doSearch()" class="btn btn-small">Pesquisar</button>' + '</div> ' + '<div ng-show="searchFor">' + '<img ng-show="searchFor" src="img/loading.gif" /> ' + 'Pesquisando...' + '</div>' + '</form>'
  • 4. }; Continuando o arquivo search.js... }).directive('searchResults', function() { return { restrict: 'E', transclude: true, scope: { searchFor: '=', searchResults: '=', searchText: '=' }, replace: true, template: '<div ng-hide="searchFor">' + '<h4 ng-show="searchResults">Foram encontrado(s) {{searchResults.length}} resultado(s) com o texto: "{{searchText}}"</h4>' + '<ul ng-show="searchResults">' + '<li ng-repeat="searchResult in searchResults | filter:x">' + '{{searchResult}}' + '</li>' + '</ul>' + '</div>' }; }).filter('checkSource',function(){ return function(items,searchText) { var filtered = []; for (var i = 0; i < items.length; i++) { if (items[i].indexOf(searchText) != -1){ filtered.push(items[i]); } } return filtered; }; }); 3 – Arquivo UserController.js – js/UserController.js function UserController($scope, $timeout, $filter) { $scope.$watch("userSearchText", function(userSearchText) { if(userSearchText) { $scope.userSearchSource = ['Douglas','Jean','Klederson','Rodrigo','Taller']; $scope.userSearchResults = []; $scope.searchingResult = true; $timeout(function() { $scope.searchingResult = false; $scope.userSearchResults = $filter('checkSource') ($scope.userSearchSource,userSearchText); }, 1000); } else { $scope.searchingResult = false; $scope.userSearchResults = []; } }); } Bom é isso ae... até aproxima abraços ;)

×