Question

您好我正在尝试制作单页角度js应用程序，但在添加到列表＆＃34; schedulelist＆＃34;只有最新的记录被推入列表，所有以前的记录都被最新记录取代

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

这是控制器：

$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

使用Angular#copy来避免模态中的参考副本

这是再次使用的相同数据被覆盖。

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

Answer 2

如果您创建一个对象，只有一个对象在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));
        };

Answer 3

问题出在这一行

$ scope.schedulelist.push（{＆＃34; ScheduleDTO＆＃34;：时间表}）;

每个团队将记录推送到对象的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));
};

Answer 4

使用角度复制，并且还可以从选择框和列表中更改变量名称。 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)

angularjs推功能不起作用

4 个答案: