离子列表，如何更新特定项目？

Question

我正在使用 angularjs 和 ionic 开发 ios 应用程序。我不知道如何更新列表中的特定项目？这是我的观点： mesReservations.html

    <ion-view cache-view="false" view-title="Mes reservations">
 <ion-pane>
  <ion-content class="padding">

<ion-list>
<ion-item ng-repeat="reservation in listeReservations" class="item item-button-right">
{{reservation.nomLoisir}}

<p>{{reservation.dateReservation}} |{{reservation.heureReservation}} | {{reservation.nbrpersonne}} pers</p>

<p>{{reservation.etatResa}}</p>
<div class="buttons">

      <button class="button button-small" ng-click="annulerReservation(reservation.idReservation)">
         <i class="icon ion-close"></i>
      </button>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!theEnd" on-infinite="loadMore()" distance="50%"></ion-infinite-scroll>
</ion-content>
</ion-pane>
</ion-view>

我的控制器：mesReservetionsController.js

    (function () {
    'use strict';
    angular
        .module('starter')
        .controller('MesReservationsController', MesReservationsController);

    MesReservationsController.$inject = ['ReservationService', '$scope', '$state'];
    function MesReservationsController (ReservationService, $scope, $state) {
        $scope.listeReservations = [];
        $scope.theEnd = false;
        var page = 0;
        $scope.enable= true;



        //chargerReservations();
        $scope.loadMore = function () {

            page++;
            ReservationService.listReservation(page)
                .then(function (result) {


                    if(result.params.reservation.length > 0){
                        angular.forEach(result.params.reservation, function (value, key) {
                            $scope.listeReservations.push(value);
                        })  
                    }
                    else {
                        $scope.theEnd = true;


                    }
                })
                .finally(function () {
                    $scope.$broadcast("scroll.infiniteScrollComplete");

                });

        }

        /*$scope.confirmerReservation = function (idReservation) {

            ReservationService.confirmerReservation(idReservation).then(function (res) {
                if(res.statut==="1"){
                    chargerReservations();
                    alert(res.message);
                }
            });
        };*/
        $scope.partagerReservation = function (idReservation) {
            alert("That's to share your reservation");
        }
        $scope.showMap = function () {
            alert("That shall show map");
        }
        $scope.changerReservation = function (idReservation) {
            debugger
            $state.go('detailReservation', {idReservation: idReservation});
        }
        $scope.detailLoisir = function () {
            alert("that shall show detail");
        }
        $scope.annulerReservation = function (idReservation) {
            debugger
            $scope.enable= false;

            ReservationService.annulerReservation(idReservation).then(function (res) {

                if(res.statut==="1"){
                    alert(res.message);
                }
            });
        };
        function chargerReservations (page) {
            debugger
            ReservationService.listReservation(page).then(function (res) {

            if(res.statut==="1"){
                    $scope.$apply(function () {
                    $scope.listeReservations = res.params.reservation;
                })


            }
        });
        }


    }

})();

我需要在调用 ReservationService.annulerReservation() 时更新 {{reservation.etatResa}} 而无需从服务器重新加载列表？

Answer 1

将整个对象传递给您的方法，而不仅仅是 id：

ng-click="annulerReservation(reservation)"

然后你可以根据需要简单地修改它（例如当ReservationService.annulerReservation调用成功时）：

reservation.etatResa = 'Whatever';

不要忘记更改，以便将 id 传递给服务（如果需要的话）：

ReservationService.annulerReservation(reservation.idReservation).then( ... )

离子列表，如何更新特定项目？

Ionic list, how to update a specific item?

angularjs

ionic