Simple search filter with angularjs and php - Mostlikers

19 August, 2015

Simple search filter with angularjs and php

Everyone must know about AngularJS. it fits the definition of a framework the best. AngularJS will get quick server response in client side. based on server response I have created search filer code. Here I have explained about how to create simple search filter using with AngularJS and PHP. 



                                      Live Demo                     Download


Recently I have posted dynamic data binding in AngularJS tutorials. here I have explained basic of angular.


ng-app            => The ng-app directive defines an AngularJS application.
ng-modules    => The ng-model directive binds the value of HTML controls.
ng-controller  => The ng-controller directive is used to (implicitly) create a scope for our template.
ng-repeat       =>  make loop for object data. similar

If you want to use AngularJS script on your website you must have to add angular.min.js external libraries.


HTML

<html ng-app=MostlikerApp>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
  </head>
  <body ng-controller="demoCtrl">      
    <table>
        <tr>
            <td align="right">Search :</td>
            <td><input ng-model="query[queryBy]" /></td>
        </tr>
    </table>
    <hr>
    <div>
        <table>
            <tr>
                <th>S.No</th>
                <th>Title</th>
            </tr>
            <tr ng-repeat="article in articles | filter:query">
                <td>{{$index + 1}}</td>
                <td><a target="_blank" href="{{article.link}}">{{article.name}}</a></td>
            </tr>
        </table>
    </div>
  </body>
</html>

PHP

Convert your PHP data into JSON data. create sample table name called 'demos ' and column. after getting your PHP result convert JSON format use Json_encode convert array format data to JSON format.
<?php  
    $db=new mysqli('localhost','root','','mostlikers'); 
    $sql=$db->query("SELECT * FROM demos ORDER BY lastupdate DESC"); 
    $json_data=array();
    foreach($sql as $rec)//foreach loop  
    {  
        $json_array['name']=$rec['name'];  
        $json_array['link']=$rec['notes']; 
        array_push($json_data,$json_array);
    }
    $my_demos = json_encode($json_data,JSON_PRETTY_PRINT);
?>

Script

Create app module and controller pass PHP JSON data.
<script type="text/javascript">
 var MostlikerApp = angular.module("MostlikerApp",[]);
  MostlikerApp.controller("demoCtrl",function($scope){
    $scope.query = {}
    $scope.queryBy = '$'
    $scope.articles = <?php echo $my_demos; ?>;
    $scope.orderProp="name";                
  });   
</script>


Thank you for visiting. if have any queries write your comments below.

"To succeed in your mission, you must have single-minded devotion to your goal. "
                                             
                                         - A. P. J. Abdul Kalam








Related Topics


2 comments:

  1. kaise ho, karthick bhai
    humko tumhra i tutorial bohot pasand aaya, bus tumko thanku kehnekeliye i comment kiye he ...
    thanku or bahut shukria...

    ReplyDelete
    Replies
    1. Hume aacha laga ye jaan kar ki aapko humara tutorial pasand aya, Agar kabhi bhi koi doubt ho to humare mostlikers ke page pe post karen, hum aapke queries ka solution bhejenge

      Delete