AngularJS不使用php显示来自db的数据

时间:2018-07-23 13:15:31

标签: php angularjs

Display.php

我不知道为什么它无法正常工作,但我在控制台中看到了数据,但在视图中却看不到

$conn   = mysqli_connect("localhost", "root", "", "angular1");
$output = array();
$query  = "SELECT * FROM product";
$result = mysqli_query($conn, $query);

if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $output[] = $row;
    }
    // echo "<pre>";
    // print_r($output);
// exit;
    echo json_encode($output);
}
?> 

Controller // addproduct.js

app.controller("addproductCtrl",['$scope','$http', function($scope, $http) {
    $scope.btnName = "Insert";
    $scope.insert = function() {
        if ($scope.image == null) {
            alert("Enter Your image Name");
        } else if ($scope.category == null) {
            alert("Enter Your category");
        } else if ($scope.name == null) {
            alert("Enter Your name");
         } else if ($scope.price == null) {
                alert("Enter Your price");
         }else if ($scope.qty == null) {
                    alert("Enter Your quantity");   
        } else {
            $http.post(
                "view/insert.php", {
                    'image':$scope.image,
                    'category':$scope.category,
                    'name': $scope.name,
                    'price': $scope.price,
                    'qty': $scope.qty,
                    'btnName': $scope.btnName,
                    'id': $scope.id
                }
            ).then(function(data) {
                $scope.image = null;
                $scope.category = null;
                $scope.name = null;
                $scope.price = null;
                $scope.qty = null;
                $scope.btnName = "Insert";
                $scope.show_data();
            },function(error){
                console.log(error);

            });
        }
    }
    $scope.show_data = function() {
        $http.get("display.php")
            .then(function(data) {
                $scope.names = data;
            },function(error){
                console.log(error);

            });
    }
}]);

html

<div class="col-md-12">
    <div ng-init="show_data()">
        <div class="col-md-6">
            <label>Image</label>
            <input type="text" name="image" ng-model="image" class="form-control">
            <br/>
            <label>Category</label>
            <input type="text" name="category" ng-model="category" class="form-control">
            <br/>
            <label>Name</label>
            <input type="text" name="name" ng-model="name" class="form-control">
            <br/>
            <label>Price</label>
            <input type="text" name="price" ng-model="price" class="form-control">
            <br/>            
            <label>Quantity</label>
            <input type="text" name="qty" ng-model="qty" class="form-control">
            <br/>   
            <input type="hidden" ng-model="id">
            <input type="button" class="btn btn-success" ng-click="insert()" value="{{btnName}}">
        </div>
        <div class="col-md-6">
            <table class="table table-bordered">
                <tr>
                    <th>S.No</th>
                    <th>Image</th>
                    <th>Category</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Quantity</th>>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                <tr ng-repeat="x in names">
                    <td>{{x.id}}</td>
                    <td>{{x.image}}</td>
                    <td>{{x.category}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.price}}</td>
                    <td>{{x.qty}}</td>
                    <td>
                        <button class="btn btn-success btn-xs" ng-click="update_data(x.id,x.image,x.category,x.name, x.price, x.qty)">
                            <span class="glyphicon glyphicon-edit"></span> Edit
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-danger btn-xs" ng-click="delete_data(x.id )">
                            <span class="glyphicon glyphicon-trash"></span> Delete
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

0 个答案:

没有答案