Criando um componente de busca com AngularJS
•
3 likes•2,871 views
This document describes how to create a search component in AngularJS that can be reused across different controllers. It includes code for a search box directive that handles input and search functionality. A search results directive is also included that displays results matching the search text. An example UserController is provided that watches for search text, queries a hard-coded list of names to return matches, and displays the results using the search directives.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Criando um componente de busca com AngularJS
Similar to Criando um componente de busca com AngularJS (20)
More from Douglas Lira
Recently uploaded
Recently uploaded (20)
Criando um componente de busca com AngularJS
- 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 ;)