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.

Link: http://www.2my4edge.com/2014/11/dynamic-data-binding-using-angularjs.html

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.

Link: https://code.angularjs.org/1.2.0-rc.3/angular.min.js

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

Menu Link

19 August, 2015