Cautare in timp real cu filtre angularjs

Post Title

      Dupa cum am zis in majoritatea tutorialelor/articolelor despre angularjs, acesta ne simplifica viata. De data asta o sa va arat cum se face un "filter costum" , ba chiar mai mult sa filtrati datele in timp real. Nu o sa intru in detalii despre directiva ng-repeat sau constructorul filter, deoarece voi adauga cat de repede pot cateva articole despre directive folositoare in angularjs si cateva ceva despre filtrarea datelor. 

Javascript:

  1.  
  2. 'use strict';
  3.  
  4. var mp = angular.module('mpApp',[]);
  5.  
  6.  
  7. mp.controller('Search',function($scope) {
  8.  
  9. var
  10. self = {
  11. data: [],
  12. };
  13.  
  14. for( var i = 0 ; i < 10; i++) {
  15. self.data.push(Math.floor((Math.random() * 999999) + 1));
  16. }
  17.  
  18. return $scope.Search = self;
  19.  
  20. });
  21.  
  22. mp.filter('findMe', function(){
  23. return function(arr, searchMe){
  24.  
  25. if (searchMe === undefined) {
  26. return arr;
  27. }
  28.  
  29. var result = [];
  30.  
  31. angular.forEach(arr, function(item) {
  32.  
  33. if(item.toString().indexOf(searchMe) !== -1){
  34. result.push(item);
  35. }
  36. });
  37.  
  38. return result;
  39. };
  40. });
  41.  

 

HTML:

  1.  
  2. <head>
  3. <title>Test Controller dinamic</title>
  4. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  5. </head>
  6. <body ng-app="mpApp">
  7. <div class="container" ng-controller="Search">
  8. <div class="row">
  9. <div class="col-md-push-4 col-md-4">
  10. <strong>Search Real Time</strong>
  11. </div>
  12. </div>
  13. </div>
  14. <div class="container" ng-controller="Search">
  15. <div class="row">
  16. <div class="col-md-push-4 col-md-4">
  17. <input class="form-control" ng-model="Search.searchMe" type="text" name="searchMe" value="">
  18. </div>
  19. </div>
  20. <div class="row">
  21. <div class="col-md-push-4 col-md-4">
  22. <p ng-repeat="nr in Search.data | findMe:Search.searchMe track by $index">
  23. <i>{}</i>
  24. </p>
  25. </div>
  26. </div>
  27. </div>
  28.  
  29. </body>
  30. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  31. <script src="mpApp.js"></script>
  32. </html>

Simplu si la obiect, traiasca filtrele angularjs :P, daca sunt intrebari va astept pe forum sau lasati comentarii.

Pentru teste live output : http://output.jsbin.com/hihogenapu/1/

Autor articol
Y!M : mic_programator
Ştiinţa fără religie este şchioapă, religia fără ştiinţă este oarbă (Albert Einstein)

Structura de aplicatie Angular.js
 

Acest articol nu este comentat, fii primul care o face

Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare
top