Блог

Главная - Вопросы по программированию - Как нажать после $ http.post в AngularJS

Как нажать после $ http.post в AngularJS

#angularjs

#angularjs

Вопрос:

Я пытаюсь найти правильный синтаксис для отправки вновь добавленного элемента после его http.posted .

Приведенный ниже синтаксис не выдает мне никаких ошибок, но и не нажимает должным образом. Любые идеи помогут

 $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 amp;amp; $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 (модальный для добавления нового напоминания)

   <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>

Комментарии:

1. Избавьте себя от дублирования имен свойств, используя один объект ng-model и передавая этот объект напрямую $http.post . Разве вы не хотите поместить объект в массив?

2. Я уверен, что вы правы, я немного заблудился в js. так, например, вы имеете в виду изменение $scope.add_reminder_time на $scope.reminder_time, чтобы соответствовать моим именам API

3. не использовать один объект в ng-model="reminder.time" … ng-model="reminder.contact" .. и т.д… затем просто отправьте $scope.reminder $http.post и пропустите все это ручное копирование свойств и имен отдельных переменных

Ответ №1:

Этого должно быть достаточно $scope.appointmentreminders.push(data)

или, если вы хотите поместить новые данные в определенную позицию в массиве, сделайте это $scope.appointmentreminders[newItemNo] = data

Но не объединяйте их в одну строку 🙂

Комментарии:

1. необходимо подтвердить, что data в ответе есть полный объект, хотя, поскольку есть 2 переменные data

2. Спасибо! Нажатие работает, отображается новый элемент, но я не вижу данных для него (если, конечно, я не обновлю). Как сказал @charlietfl, я, возможно, перепутал имена своих свойств. Добавлен код выше

3. Только что заметил, что data содержит data: {"success": true} хм, как мне нажать data , тот, который содержит мои данные. Переименовать его? Я попробую это

4. Получил его, изменил var data = { var reminderdata = { и использовал reminderdata для нажатия. Спасибо, ребята