AngularJS Einfügen und Anzeigen aus der Datenbank

Ich verwende AngularJS, um Daten aus meiner MYSQL-Datenbank einzufügen und anzuzeigen. Die Anzeige der Daten funktionierte erfolgreich, aber als ich die Einfügefunktion hinzugefügt hatte, brach die Anzeigefunktion. Jetzt innerhalb der Tabelle, die die Daten anzeigen soll, erhalte ich nur die Variable z. B. {{x.ID}} oder {{x.Make}}. Jede Hilfe wird geschätzt.AngularJS Einfügen und Anzeigen aus der Datenbank

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

Quelle

2017-12-15 The doeson

Sie sollten auch den entsprechenden PHP-Code enthalten –

Sie haben das Modul zwei Mal für zwei Controller erstellt. Es ist nicht der richtige Weg, AngularJS Module und Controller zu erstellen. Erstellen Sie das Modul einmal und fügen Sie die erforderlichen Steuerelemente hinzu. Der JavaScript-Code soll folgendes mag:

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

Und Sie haben diese Steuerung geeignete Weise unter separater Vorlage zu verwenden.

Quelle

2017-12-15 12:57:41 Syedur

AngularJS Einfügen und Anzeigen aus der Datenbank

Antwort

Verwandte Themen