AngularJS: Wie Daten aus Bootstrap modal in Tabelle zu pushen

Question

Ich habe ein Bootstrap-modal um Daten einzugeben, und wenn die Schaltfläche Submit geklickt wird, möchte ich die Daten in eine Bootstrap-Tabelle schieben. Aber es passiert nichts, und ich weiß nicht, warum ... Das ist mein modal ist:

<div class="modal fade-scale" id="workExpModal" name="workExpModal" 
    role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Work Experience</h4> 
      </div> 
      <div class="modal-body"> 
       <form action="" method="post" ng-submit="saveWorkExp()" 
        name="workExpForm"> 
        <div class="form-group"> 
         <label>Time:</label> <br> 
         <div class="row"> 
          <div class="col-md-6"> 
           <input type="text" class="form-control" id="timeStart" 
            placeholder="From: dd/MM/yyyy" ng-model="workExperience.From" /> 
          </div> 
          <div class="col-md-6"> 
           <input type="text" class="form-control" id="timeEnd" 
            placeholder="To: dd/MM/yyyy" ng-model="workExperience.To" /> 
          </div> 
         </div> 
         <br> <label>Title/Position:</label><br> 
         <div class="row"> 
          <div class="col-md-12"> 
           <input type="text" class="form-control" id="title" 
            placeholder="Title/Position" ng-model="workExperience.Title"> 
          </div> 
         </div> 
         <br> <label>Workplace/Company:</label><br> 
         <div class="row"> 
          <div class="col-md-12"> 
           <input type="text" class="form-control" id="workplace" 
            placeholder="Workplace/Company" 
            ng-model="workExperience.Workplace" /> 
          </div> 
         </div> 
         <br> <label>Contact:</label><br> 
         <div class="row"> 
          <div class="col-md-12"> 
           <input type="text" class="form-control" id="contact" 
            placeholder="Contact" ng-model="workExperience.Contact" /> 
          </div> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" class="btn btn-primary">Submit</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Das ist mein Tisch ist:

<div class="container page-header table-responsive"> 
    <h3>Work Experience</h3> 
    <table class="table" id="tblWorkExp"> 
     <thead> 
      <tr> 
       <th>Time</th> 
       <th>Title/Position</th> 
       <th>Workplace/Company</th> 
       <th>Contact</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="workexp in workexps"> 
       <td>{{workexp.From}} - {{workexp.To}}</td> 
       <td>{{workexp.Title}}</td> 
       <td>{{workexp.Workplace}}</td> 
       <td>{{workexp.Contact}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Und das ist meine Funktion:

<script type="text/javascript"> 
    /* $(document).ready(function() { 
     $(".modal").validator(); 
    }); */ 
    var app = angular.module('resumeApp', []); 
    app.controller('resumeController', function($scope) { 
     $scope.workexps = []; 
     $scope.saveWorkExp = function() { 
      $scope.workexps.push($scope.workExperience); 
      delete $scope.workExperience; 
      $('#workExpModal').modal('hide'); 
      $scope.workExpForm.$setPristine(); 
     } 
    }); 
</script> 

Kann jemand helfen?

Answer 1

Es scheint, dass Ihr nicht in

ng-submit="saveWorkExp(workExperience)" 

Verwenden den Code unten

<div class="modal fade-scale" id="workExpModal" name="workExpModal" 
    role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Work Experience</h4> 
      </div> 
      <div class="modal-body"> 
       <form action="" method="post" ng-submit="saveWorkExp(workExperience)" 
        name="workExpForm"> 
        <div class="form-group"> 
         <label>Time:</label> <br> 
         <div class="row"> 
          <div class="col-md-6"> 
           <input type="text" class="form-control" id="timeStart" 
            placeholder="From: dd/MM/yyyy" ng-model="workExperience.From" /> 
          </div> 
          <div class="col-md-6"> 
           <input type="text" class="form-control" id="timeEnd" 
            placeholder="To: dd/MM/yyyy" ng-model="workExperience.To" /> 
          </div> 
         </div> 
         <br> <label>Title/Position:</label><br> 
         <div class="row"> 
          <div class="col-md-12"> 
           <input type="text" class="form-control" id="title" 
            placeholder="Title/Position" ng-model="workExperience.Title"> 
          </div> 
         </div> 
         <br> <label>Workplace/Company:</label><br> 
         <div class="row"> 
          <div class="col-md-12"> 
           <input type="text" class="form-control" id="workplace" 
            placeholder="Workplace/Company" 
            ng-model="workExperience.Workplace" /> 
          </div> 
         </div> 
         <br> <label>Contact:</label><br> 
         <div class="row"> 
          <div class="col-md-12"> 
           <input type="text" class="form-control" id="contact" 
            placeholder="Contact" ng-model="workExperience.Contact" /> 
          </div> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" class="btn btn-primary">Submit</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

und Ihre modifizierte Controller

<script type="text/javascript"> 
    /* $(document).ready(function() { 
     $(".modal").validator(); 
    }); */ 
    var app = angular.module('resumeApp', []); 
    app.controller('resumeController', function($scope) { 
     $scope.workexps = []; 
     $scope.saveWorkExp = function(workExperience) { 
      $scope.workexps.push(workExperience); 
      delete $scope.workExperience; 
      $('#workExpModal').modal('hide'); 
      $scope.workExpForm.$setPristine(); 
     } 
    }); 
</script> 

Answer 2

I hv nicht den Code werden die neuen Daten vorbei für Sie, aber ich hv eine Frage, um Ihnen die Antwort zu bekommen:

Ist Ihr Modal innerhalb des ng-Controllers? Wenn nein, dann werden alle winkelbezogenen Attribute nicht funktionieren. Sie können console.log etwas in Ihrer SaveWorkExp() - Funktion versuchen, um zu sehen, ob es aufgerufen wird.