Question

我是Ionic框架的新手。我刚开始在AngularJS中构建一些功能。在这里，我想要的是在html页面中输入用户的电子邮件和预订ID，然后将其重定向到显示所有电子邮件ID和预订ID的其他页面...这是我的代码：

Reservation.html：

<form ng-submit = "goBooking(data)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="Enter Your Email Id" ng-model="data.emailId" required>
          </label>
          <label class="item item-input">
            <input type="text" placeholder="Enter Your Booking Id" ng-model="data.bookingID" required>
          </label>
        </div>
        <div class="padding">
          <input type="submit" class="button button-block button-positive" value = "Submit" />
        </div>
      </form>

     </ion-content>
    </ion-view>


Controller.js:

.controller('reservationCtrl', function($scope, $state, $stateParams) {

    $scope.toDoListItems = [{
    emailId: 'versha',
    bookingID: '123'
  }, {
    emailId: 'rahul',
    bookingID: '456'
  }];

  $scope.getTotal = function(){
      return $scope.toDoListItems.length;
  }

    $scope.goBooking = function(data){
    $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
    $state.go('myBookingDetails');
    data.emailId = ' '; 
    data.bookingID = ' ';

     };
});


myBookingDeatils.html:

<ion-view view-title="Hotel Reception">

  <ion-content>
    <ion-list>
        <ion-item ng-controller = "reservationCtrl" ng-repeat="item in toDoListItems">
        <p> Welcome {{item.emailId}} !!!! </p>
        ion-item>
      </ion-list>

  </ion-content>
  </ion-pane>

</ion-view>

运行后，

我的输出为

欢迎Versha !! 欢迎Rahul !!

我没有收到该电子邮件ID和预订ID ..我在Reservation.html上输入了什么。我认为我的输入值没有在toDoListItems中设置。

某处，此代码未插入值$ scope.toDoListItems.push（{emailId：data.emailId，bookingID：data.bookingID}）;

请建议!!在此先感谢!!

Answer 1

我假设您为每个州使用相同的控制器？当您更改状态时，重新加载控制器会将您的$scope.toDoListItems阵列重置为其初始状态。您将要将toDoListItems保存在服务中。所以......

控制器：

.controller('reservationCtrl', function($scope, $state, $stateParams, toDo) {



    $scope.getTotal = function(){
        return toDo.toDoListItems.length;
    }

    $scope.goBooking = function(data){
        toDo.toDoListItems.push({
            emailId:data.emailId,
            bookingID:data.bookingID
        });
        $state.go('myBookingDetails');
        data.emailId = null; 
        data.bookingID = null;

    };
});

服务：

.factory('toDo', [function () {

    var toDoListItems = [{
        emailId: 'versha',
        bookingID: '123'
    }, {
        emailId: 'rahul',
        bookingID: '456'
    }];

    return {
        toDoListItems : toDoListItems
    };

}]);

这将确保数据在状态更改后仍然存在，但是如果您希望此数据永久保留并保持页面重新加载等等，则需要连接数据库，如果您纯粹是前端人员，我建议看Firebase

Answer 2

实现此目的的一种非常简单的方法是使用$ localstorage。

这样的事情：

$scope.goBooking = function(data){
  $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
  $localstorage.setObject('toDoListItems', $scope.toDoListItems);
  $state.go('myBookingDetails');
 };

然后在你的新视图内部（控制器和范围正在按照Jacob指出的那样得到刷新）

$scope.toDoListItems = $localstorage.getObject('toDoListItems');

您只需要为您的服务添加$ localstorage服务（详见下面的链接）。有关对Ionic使用localstorage的更多信息，请访问：http://learn.ionicframework.com/formulas/localstorage/

如何将动态数据推送到Javascript对象？

2 个答案: