AngularJSデータベースからの挿入と表示

AngularJSを使用してMYSQLデータベースからデータを挿入して表示しています。データの表示は正常に終了しましたが、挿入機能を追加すると表示機能が壊れました。データを表示するはずのテーブルの中で、変数{{x.ID}}や{{x.Make}}を取得しています。何か助けていただければ幸いです。AngularJSデータベースからの挿入と表示

<!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>

出典

2017-12-15 The doeson

関連するPHPコードも含める必要があります –

2つのコントローラに対してモジュールを2回作成しました。 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>

そして、あなたは別のテンプレートの下でこれらのコントローラの適切な方法を使用する必要があります。

出典

2017-12-15 12:57:41 Syedur

AngularJSデータベースからの挿入と表示

答えて

関連する問題