简体   繁体   中英

How to display data using AngularJS with php

I want to connect my index.php page with ngconnect.php and want to display my table record.

This is my index.php page below.................

<html>
        <head>
            <title>first ng app recieve data from database</title>
            <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        </head>
        <body ng-app="myapp" ng-controller="myctrl">
            <ul>
              <li ng-repeat="x in names">
                {{ x }}
              </li>
            </ul>
            <script>
            $(function(){
                var app = angular.module('myapp',[]);
                app.controller('myctrl',function($scope,$http){
                    $http({method:'GET', url:'ngconnect.php'}).success(function(response){
                        $scope.names = response;
                    });
                });
            });
            </script>   
        </body>
    </html>

This is my ngconnect.php page below.............

<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = mysql_connect($servername, $username, $password);
if (!$conn) {
    die("Connection failed: " . $conn->connect_error);
} else {
    $db_selected = mysql_select_db('dsc');  
    if (!$db_selected) {
        die ('Can\'t use dsc : ' . mysql_error());
    } else {
        $result = mysql_query('SELECT * from user');
        if (!$result) {
            die('Invalid query: ' . mysql_error());
        } else {
            $data = array();
            while ($row = mysql_fetch_array($result)) {          
                $data[] = $row;           
            }
            echo json_encode($data);
        }
    }
}
 mysql_close($conn);
?>

Why my data is not being display?

ngconnect.php does display the following.....

[{"0":"1","user_id":"1","1":"Amit","first_name":"Amit","2":"","middle_name":"","3":"Kushwaha","last_name":"Kushwaha","4":"akushwaha.softvisionindia@gmail.com","email":"akushwaha.softvisionindia@gmail.com","5":"2","rate_dsc_2":"2","6":"3","rate_dsc_3":"3","7":"4","rate_token":"4","8":"e10adc3949ba59abbe56e057f20f883e","password":"e10adc3949ba59abbe56e057f20f883e","9":"Enabled","status":"Enabled","10":"8858234949","phone":"8858234949","11":"NULL","forget_link":"NULL","12":"00:00:00","forget_time":"00:00:00"},{"0":"2","user_id":"2","1":"Sandeep","first_name":"Sandeep","2":"","middle_name":"","3":"Tripathi","last_name":"Tripathi","4":"sandeep.softvisionindia@gmail.com","email":"sandeep.softvisionindia@gmail.com","5":"10","rate_dsc_2":"10","6":"20","rate_dsc_3":"20","7":"30","rate_token":"30","8":"e10adc3949ba59abbe56e057f20f883e","password":"e10adc3949ba59abbe56e057f20f883e","9":"Enabled","status":"Enabled","10":"9936882864","phone":"9936882864","11":"","forget_link":"","12":"00:00:00","forget_time":"00:00:00"}]

Try these codes..Hope it will help You..

I assume that your responce is in json format (array of object) as you posted your responce of php file..

<html>
<head>
    <title>first ng app recieve data from database</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
    <ul>
      <li ng-repeat="x in names">
        {{ x }}
    </li>
</ul>
<script>
    var myapp = angular.module('myapp', []);

    myapp.controller('myctrl', function ($scope, $http) {
        $http.get('ngconnect.php').success(function(data) {
            $scope.names = data;
        });

    });
</script>
</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM