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推功能不工作

回答

相关问题