user3489502 user3489502 - 2 months ago 6
AngularJS Question

How to push after $http.post in AngularJS

I'm trying to find the right syntax to push a newly added item after it has been http.posted .

The syntax below doesn't give me any error, but doesn't push properly neither. Any ideas would help

$scope.insertAppointmentReminderEntry = function() {

$scope.add_reminder_time = this.add_reminder_time;
$scope.add_reminder_timeunit = this.add_reminder_timeunit;
$scope.add_delivery_method = this.add_delivery_method;
$scope.add_delivery_contact = this.add_delivery_contact;

var data = {
group_id : $scope.groupid,
appointment_id : $scope.appointmentid,
reminder_time : $scope.add_reminder_time,
reminder_timeunit : $scope.add_reminder_timeunit,
delivery_method : $scope.add_delivery_method,
delivery_contact : $scope.add_delivery_contact
};

$http.post(urlApiAppointmentReminders + $scope.groupid, data).success(function(data, status) {

var newItemNo = $scope.appointmentreminders.length+1;

$scope.appointmentreminders.push($scope.appointmentreminders[newItemNo].data);
})

modalInstance.close();
};


html

<div ng-repeat="x in appointmentreminders" class="row" ng-style="{ 'border-top' : ( x.delivery_method != appointmentreminders[$index-1].delivery_method && $index != 0 ? '1pt solid #eee' : '0pt solid #eee' )}" style="border-top:1pt solid #eee; padding: 0.25em 0 0.25em 0" >

<div class="col-md-offset-1 col-md-4">
@{{x.time}} @{{x.timeunit}}@{{x.time > 1 ? 's' : ''}} prior to appointment
</div>

<div class="col-md-4">
Reminder: @{{x.delivery_contact}}
</div>

<div class="col-md-2">
<!-- delete this reminder -->
<a class="btn btn-xs btn-warning pull-right glyphicon glyphicon-trash" ng-click="ctrl.removeItem($index)"></a>
</div>

</div> <!-- ng-repeat -->


html (modal to add new reminder)

<script type="text/ng-template" id="addScheduleModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add a new appointment reminder</h3>
</div>
<div class="modal-body">

<div class="row" style="padding: 0.5em 0 0.5em 0.5em">
<div class="col-sm-4" >
{!! Form::text( 'reminder_time', '30', ['class' => 'form-control', 'placeholder' => '', 'ng-model' => 'add_reminder_time']) !!}
</div>
<div class="col-sm-8" >
{!! Form::select('reminder_timeunit', ['minute' => 'minutes(s)', 'hour' => 'hour(s)', 'day' => 'day(s)', 'week' => 'week(s)', 'month' => 'month(s)'], null, ['class' => 'form-control', 'ng-model' => 'add_reminder_timeunit']) !!}
</div>
</div>

<div class="row" style="padding: 0.5em 0 0.5em 0.5em">
<div class="col-sm-4" >
{!! Form::select('delivery_method', ['eml' => 'Email'], null, ['class' => 'form-control', 'ng-model' => 'add_delivery_method']) !!}
</div>
<div class="col-sm-8" >
{!! Form::text('delivery_contact', null, ['class' => 'form-control', 'placeholder' => 'Your email address', 'ng-model' => 'add_delivery_contact']) !!}
</div>
</div>

<div class="modal-footer">
<button class="btn btn-primary" ng-click="insertAppointmentReminderEntry()">Save</button>
<button class="btn btn-primary" ng-click="$close()">Close</button>
</div>
</script>

Answer

This should be sufficient $scope.appointmentreminders.push(data)

or if you want to put the new data in specific position in the array, then do this $scope.appointmentreminders[newItemNo] = data

But do not combine them in one line :)