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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Criando um componente de busca com AngularJS

Ähnlich wie Criando um componente de busca com AngularJS (20)

Mehr von Douglas Lira

Mehr von Douglas Lira (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Criando um componente de busca com AngularJS