Question

我正在使用AngularJS插入然后显示来自我的MYSQL数据库的数据。显示数据已成功运行，但是当我添加插入功能时，显示功能已损坏。现在在应该显示数据的表格中，我只是获取变量，例如{{x.ID}}或{{x.Make}}。任何帮助表示赞赏。

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<title> Display data from Mysql Database Using AngularJS with PHP</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>  
<body>  
<div class="container">
    <h1 align="center">Insert Data Into Database using Angular JS with PHP Mysql</h1>
    <div ng-app="sa_insert" ng-controller="controller">
        <label>ID</label><input type="text" name="ID" ng-model="name" class="form-control"><br/>
        <label>Make</label><input type="text" name="Make" ng-model="Make" class="form-control"><br/>
        <label>Model</label><input type="text" name="Model" ng-model="Model" class="form-control"><br/>
        <label>Reg</label><input type="text" name="Reg" ng-model="Reg" class="form-control"><br/>
        <label>Owner</label><input type="text" name="Owner" ng-model="Owner" class="form-control"><br/>
        <label>Image</label><input type="text" name="Image" ng-model="Image" class="form-control"><br/>
        <input type="submit" name="insert" class="btn btn-success" ng-click="insert()" value="Insert">
    </div>
</div>
<!-- Script -->
<script>
var app = angular.module("sa_insert", []);
app.controller("controller", function($scope, $http) {
    $scope.insert = function() {
        $http.post(
            "statementinsert.php", {
                'ID': $scope.ID,
                'Make': $scope.Make,
                'Model': $scope.Model,
                'Reg': $scope.Reg,
                'Owner': $scope.Owner,
                'Image': $scope.Image,

            }
        ).success(function(data) {
            alert(data);
            $scope.ID = null;
            $scope.Make = null;
            $scope.Model = null;
            $scope.Reg = null;
            $scope.Owner = null;
            $scope.Image = null;
        });
    }
});
</script>
<div class="container">
    <h3 align="center">Display data from Mysql Database Using AngularJS with PHP</h3>
    <div ng-app="sa_display" ng-controller="controller" ng-init="display_data()">
        <table class="table table-bordered">
            <tr>
                <th>ID</th>
                <th>Make</th>
                <th>Model</th>
                <th>Age</th>
                <th>Reg</th>
                <th>Owner</th>
                <th>Image</th>
            </tr>
            <tr ng-repeat="x in names">
                <td>{{x.ID}}</td>
                <td>{{x.Make}}</td>
                <td>{{x.Model}}</td>
                <td>{{x.Age}}</td>
                <td>{{x.Reg}}</td>
                <td>{{x.Owner}}</td>
                <td>{{x.Image}}</td>
            </tr>
        </table>
    </div>
</div>
<!-- Script -->  
<script>
    var app = angular.module("sa_display", []);
    app.controller("controller", function($scope, $http) {
        $scope.display_data = function() {
            $http.get("statement.php")
                .success(function(data) {
                    $scope.names = data;
                });
        }
    });
</script> 
</body>  
</html>

Answer 1

您已为两个控制器创建了两次模块。它不是创建AngularJS模块和控制器的正确方法。创建模块一次并添加必要的控制器。 javascript代码应该如下：

<script>
var app = angular.module("saAppModule", []);
app.controller("insertController", function($scope, $http) {
    $scope.insert = function() {
        $http.post(
            "statementinsert.php", {
                'ID': $scope.ID,
                'Make': $scope.Make,
                'Model': $scope.Model,
                'Reg': $scope.Reg,
                'Owner': $scope.Owner,
                'Image': $scope.Image,

            }
        ).success(function(data) {
            alert(data);
            $scope.ID = null;
            $scope.Make = null;
            $scope.Model = null;
            $scope.Reg = null;
            $scope.Owner = null;
            $scope.Image = null;
        });
    }
});

app.controller("disPlayController", function($scope, $http) {
        $scope.display_data = function() {
            $http.get("statement.php")
                .success(function(data) {
                    $scope.names = data;
                });
        }
    });
</script>

并且您必须在单独的模板下使用这些控制器适当的方式。

AngularJS从数据库插入和显示

1 个答案: