AngularJS Push-Funktion funktioniert nicht

Question

Hallo Ich versuche, eine einzelne Seite Winkel js Anwendung zu machen, aber während der Liste „ScheduleList“ Hinzufügen nur der letzte Datensatz werden immer in die Liste geschoben und alle bisherigen Rekorde werden immer durch die neuesten ersetzt

Rekord

Das ist mein Html:

<table class="table1" cellspacing=2 cellpadding=5 border=0> 
    <div ng-repeat="scheduleDTO in schedules"> 
<tr> 
<td> 
     <SELECT id="days" name="days" class="form-right" style="width:90%" ng-model="scheduleDTO.day_of_the_week" required> 

        <OPTION selected value="Monday">Monday</OPTION> 
        <OPTION value="Tuesday">Tuesday</OPTION> 
        <OPTION value="Wednesday">Wednesday</OPTION> 
        <OPTION value="Thursday">Thursday</OPTION> 
        <OPTION value="Friday">Friday</OPTION> 
        <OPTION value="Saturday">Saturday</OPTION> 
        <OPTION value="Sunday">Sunday</OPTION>    
     </SELECT> 

</td> 
<td> 
     <SELECT id="start_time" name="Start" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time" required> 
        <OPTION value="1:00">01:00</OPTION> 
        <OPTION value="2:00">02:00</OPTION> 
        <OPTION value="3:00">03:00</OPTION> 
        <OPTION value="4:00">04:00</OPTION> 
        <OPTION value="5:00">05:00</OPTION> 
        <OPTION value="6:00">06:00</OPTION> 
        <OPTION value="7:00">07:00</OPTION> 
        <OPTION value="8:00">08:00</OPTION> 
        <OPTION selected value="9:00">09:00</OPTION> 
        <OPTION value="10:00">10:00</OPTION> 
        <OPTION value="11:00">11:00</OPTION> 
        <OPTION value="12:00">12:00</OPTION> 
     </SELECT> 

</td> 
<td> 
<SELECT id="start" name="am" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time_meridiem"required> 
        <OPTION selected value="AM">AM</OPTION> 
        <OPTION value="PM">PM</OPTION> 
</SELECT> 

<td><SELECT id="end_time"class="form-right" name="end" style="width:90%" ng-model="scheduleDTO.end_time" required> 
        <OPTION value="1:00">01:00</OPTION> 
        <OPTION value="2:00">02:00</OPTION> 
        <OPTION value="3:00">03:00</OPTION> 
        <OPTION value="4:00">04:00</OPTION> 
        <OPTION selected value="5:00">05:00</OPTION> 
        <OPTION value="6:00">06:00</OPTION> 
        <OPTION value="7:00">07:00</OPTION> 
        <OPTION value="8:00">08:00</OPTION> 
        <OPTION value="9:00">09:00</OPTION> 
        <OPTION value="10:00">10:00</OPTION> 
        <OPTION value="11:00">11:00</OPTION> 
        <OPTION value="12:00">12:00</OPTION> 
     </SELECT> 

     </td> 
<td> 

<SELECT id="end" name="pm" class="form-right" style="width:90%" ng-model="scheduleDTO.end_time_meridiem" required> 
        <OPTION value="AM">AM</OPTION> 
        <OPTION selected value="PM">PM</OPTION> 
</SELECT> 


</td> 
<td><input type="button" class="addSch" ng-click="add(scheduleDTO)" value="Add Schedule" style="width:90%"> <!-- add_schedule(); --> 

</td> 
</tr> 
</div> 
</table> 
<table align='center' class="table1" cellspacing=2 cellpadding=5 id="table" border=0> 

<tr ng-repeat="ScheduleDTO in schedulelist"> 

<td>{{scheduleDTO.day_of_the_week}}</td> 
<td>{{scheduleDTO.start_time}}</td> 
<td>{{scheduleDTO.start_time_meridiem}}</td><td>To</td> 
<td>{{scheduleDTO.end_time}}</td> 
<td>{{scheduleDTO.end_time_meridiem}}</td> 
<td><input type='button' value='Delete' class='delete' ng-click="remove(scheduleDTO)"></td> 


</table> 

Dies ist rthe Controller:

$scope.schedulelist = [ 

    ]; 


    $scope.add = function (schedule) 
      {     schedule.volunteer_id=""; 
           schedule.sid=""; 
        $scope.schedulelist.push({"ScheduleDTO":schedule}); 
        alert(angular.toJson($scope.schedulelist)); 
      }; 
    $scope.remove = function(schedule) { 
       var index = $scope.schedulelist.indexOf(schedule); 
       $scope.schedulelist.splice(index, 1);  
        alert(angular.toJson($scope.schedulelist)); 
      }; 

Answer 1

Verwenden Angular#copy in Referenzkopie zu vermeiden die modal,

, die das gleiche verwendet wird, immer wieder und Daten überschrieben werden.

$scope.schedulelist.push({"ScheduleDTO":angular.copy(schedule)}); 

Answer 2

gibt es nur eine Instanz eines Objekts in JavaScript, wenn Sie ein Objekt erstellen sich dort, um es einzelne Referenz sein wird, das heißt, wenn Sie in dem Objekt ändern alle Werte so geändert werden, wird auch der Wert ändern Jedes Mal, wenn alle Werte im Array gedrückt werden, beziehen sie sich auf dasselbe Objekt. wird eine bessere Lösung

$scope.add = function (scheduleValue) 
     { 
      var schedule=angular.copy(scheduleValue); 
       schedule.volunteer_id=""; 
          schedule.sid=""; 
       $scope.schedulelist.push({"ScheduleDTO":schedule}); 
       alert(angular.toJson($scope.schedulelist)); 
     }; 

Answer 3

Das Problem ist in dieser Zeile

$ scope.schedulelist.push ({ "ScheduleDTO": Zeitplan}) sein;

In jedem Team wird ein Datensatz an die Eigenschaft ScheduleDTO des Objekts gesendet und jedes Mal, wenn ein neuer Eintrag den alten ersetzt.

Sie können aus Auswahlbox und Liste so etwas wie diese

$scope.add = function (schedule) 
{     schedule.volunteer_id=""; 
schedule.sid=""; 
//Create an array of ScheduleDTO 
if( $scope.schedulelist.ScheduleDTO instanceof Array == false) { 
    $scope.schedulelist.ScheduleDTO = [] 
} 
//Push the schedule into the array 
$scope.schedulelist.ScheduleDTO.push(schedule); 
alert(angular.toJson($scope.schedulelist)); 
}; 

Answer 4

Verwenden Winkeln Kopie und auch Variablennamen ändern tun. Please check this fiddle

(function($){ 

try{ 
var demoApp = angular.module('demoApp',[]); 
demoApp.controller('demoController',['$scope',function($scope){ 
    $scope.schedulelist = [ 

    ]; 


    $scope.add = function (scheduleObject) { 

          var schedule = angular.copy(scheduleObject) 
        schedule['volunteer_id']=""; 
        schedule['sid']=""; 

        $scope.schedulelist.push(
        {"ScheduleDTO":schedule} 
       ); 
      }; 
    $scope.remove = function(schedule) { 
       var index = $scope.schedulelist.indexOf(schedule); 
       $scope.schedulelist.splice(index, 1);  
        alert(angular.toJson($scope.schedulelist)); 
      }; 

      }]) 
}catch(e){ 
console.log(e) 
} 

})(jQuery)