Criando um componente de busca com AngularJS

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!!

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!!

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>'

};
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 ;)

Criando um componente de busca com AngularJS

Recommended

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

More from Douglas Lira (9)

Recently uploaded

Recently uploaded (20)

Criando um componente de busca com AngularJS