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

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Criando um componente de busca com AngularJS

Similaire à Criando um componente de busca com AngularJS (20)

Plus de Douglas Lira

Plus de Douglas Lira (9)

Dernier

Dernier (20)

Criando um componente de busca com AngularJS