2016-04-27 5 views
-1

Ich bin neu zu Angular js und Federverschluß Ich muss die Daten über Formular abzuschicken i cant find, wie Daten dies HTML-Datei-Datenbank hinzuzufügen:hinzufügen Daten unter Verwendung von Winkel js und Federverschluß

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Accueil</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 

</head> 
<body > 
<div class="container"> 
<div ng-app="app"> 
<div ng-controller="MainController as main"> 

     <h1>{{main.title}}</h1> 

    <div > 
<table > 
<tr> 
<td>id</td> 
<td>nom</td> 
<td>prenom</td> 
<td>cin</td> 
<td>date naissance</td> 
<td>nationalite</td> 
<td></td> 
<td></td> 



</tr> 
<tr data-ng-repeat="a in etudiants"> 

<td>{{a.id}}</td> 
<td>{{a.nom}}</td> 
<td>{{a.prenom}}</td> 
<td>{{a.cint}}</td> 
<td>{{a.date_naissi}}</td> 
<td>{{a.nat}}</td> 
<td><a ng-click="editUser(user.id)" class="btn btn-small btn-primary">edit</a></td> 
<td><a ng-click="deleteUser(user.id)" class="btn btn-small btn-danger">delete</a></td> 



</tr> 
</table> 
</div> 
</div></div> 

<br> 
<div ng-app="appajout"> 
<div ng-controller="contAjout"> 

<form ng-submit="submit()" role="form"> 
<input ng-model="nom" type="text" name="nom"></input> 
<input ng-model="prenom" type="text" name="prenom" ></input> 
<input ng-model="cint" type="text" name="cint"></input> 
<input ng-model="nat" type="text" name="nat"></input> 
<input ng-model="dateNaissi" type="text" name="dateNaissi"></input> 
<input class="btn btn-primary" ng-click="submit()" type="submit" value="Submit"> 
<!-- <button ng-click="save()">ajouter</button> --> 
</form> 

</div> 
</div> 
</div> 
</body> 
</html> 

js Datei:

/*____________________________________test________________________________*/ 
angular.module('app', []); 
angular.module('app').controller("MainController", function($scope,$http){ 

    var vm = this; 
     vm.title = 'Liste des etudiants'; 
    $scope.etudiants=[]; 

      $http.get("/etudiant/listeEtudiant").success(function(data) 
         { 
          $scope.etudiants = data; 


         }); 

}); 
/*____________________________________Ajout________________________________*/ 
var app=angular.module('appajout', []); 
//angular.module('app', []); 
app.controller('contAjout', function($scope,$http){ 

    $scope.nom=null; 
    $scope.prenom=null; 
    $scope.cint=null; 
    $scope.nat=null; 
    $scope.dateNaissi=null; 

    $scope.submit = function submit() { 

      $http.post("/etudiant/ajouter?nom="+$scope.nom+ 
       "&prenom="+$scope.prenom+ 
       "&cint="+$scope.cint+ 
       "&nat="+$scope.nat+ 
       "&dateNaissi="+$scope.dateNaissi 
     ) 
      .success(function(data, status, headers) { 
      alert("Task added"); 

       }); 

     }; 

}); 

ich möchte wissen, was Problem im Code ist!

dies mein Controller ist:

@Autowired 
    private EtudiantRepository etudiantRepository; 
// @Secured(value="ROLE_ADMIN") 
    @RequestMapping(value="/etudiant/ajouter", method = RequestMethod.POST) 
    public Etudiant ajout(Etudiant e) 
      { 
     return etudiantRepository.save(e); 
      } 
+0

Was ist der Fehler? Wo ist dein Controllercode? –

+0

Ich kann keine Daten zur Datenbank hinzufügen, wenn ich auf die Schaltfläche zum Speichern klicke! – 4code

+0

Das ist nicht "der Fehler", das ist das Symptom. Warum fügt es keine Daten zur Datenbank hinzu? Funktioniert Ihre "Speichern" -Funktion? Läuft der Aufruf "$ http"? Zeigt die Netzwerkkarte an, dass der Aufruf '$ http' ordnungsgemäß funktioniert? –

Antwort

1

Zu Beginn, die ng-Klick = "save()" nicht mit der Funktion $ scope.submit. Sie müssen es zu

<button ng-click="submit()">ajouter</button> 
+0

ich ändere es durch submit(), aber es funktioniert nicht für mich !!!! – 4code

+0

Wenn Sie Ihren gesamten Code nicht veröffentlichen, kann Ihnen niemand helfen. Wenn Sie Chrome verwenden, öffnen Sie die "inspect" -Tools und überprüfen Sie "console" und "network", um das Problem zu beheben. –

+0

keine Fehlerbehebung in der Konsole Chrome !! – 4code

0

ändern Das Hauptproblem besteht darin, dass Sie mehrere eckige Module in der gleichen HTML definiert haben. Siehe https://docs.angularjs.org/api/ng/directive/ngApp

nur eine AngularJS Anwendung Auto-Bootstrap per HTML sein kann Dokument

löschen ersten ng-App und es wird funktionieren. Auch Sie haben

<form ng-submit="submit()" role="form"> 

und

<input class="btn btn-primary" ng-click="submit()" type="submit" value="Submit"> 

Dies wird zweimal auf jedem Klick Post. Und es wird die gesamte Seite aktualisieren, was Sie in modernen Single-Page-Web-Apps nicht tun möchten. Sie könnten das Formular vollständig entfernen, entfernen Sie die Eingabetyp-Taste vollständig und halten Sie einfach die

Verwandte Themen