angularjs推功能不工作

嗨我正在嘗試製作一個單一頁面的角度js應用程序，但同時添加到列表「schedulelist」只有最新的記錄被推入列表中，所有以前的記錄正在被最新的記錄angularjs推功能不工作

這是我的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>

這是rthe控制器：

$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)); 
      };

來源

2017-04-03 Urkilashi

您能否提供小提琴 –

使用Angular#copy，以避免在參考副本模式，

這是同一個再次使用和數據被覆蓋。

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

來源

2017-04-03 04:51:07

存在的JavaScript對象的只有一個實例，如果你創建了一個對象會有一個參考吧，也就是說，如果你的對象改變所有的值將更改，所以，即使要更改的值每次它在數組中推入的所有值都會引用同一個對象。更好的解決方案將是

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

來源

2017-04-03 04:55:43

的問題是在這條線

$ scope.schedulelist.push（{ 「ScheduleDTO」：時間表}）;

每個團隊記錄被推送到該對象的ScheduleDTO屬性，每次新的條目替換舊的條目。

你可以做這樣的事情

$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)); 
};

來源

2017-04-03 04:58:17

非常感謝您的幫助。但還有一個問題。同時打印它只打印最新的唱片 – Urkilashi

你可以創建一個小提琴。這將是有益的。 –

使用角度副本，以及從選擇框和列表更改變量名。 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)

來源

2017-04-03 05:50:45

angularjs推功能不工作

回答

相關問題