Question

我遇到这个问题很麻烦，非常感谢你的帮助。

这是我的HTML：

<form ng-submit="doLogin()" name="student">
      <div class="list">
          <ion-radio ng-model="grade" ng-value="0">Kindergarten</ion-radio>
          <ion-radio ng-model="grade" ng-value="1">1st Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="2">2nd Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="3">3rd Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="4">4th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="5">5th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="6">6th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="7">7th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="8">8th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="9">9th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="10">10th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="11">11th Grade</ion-radio>
          <ion-radio ng-model="grade" ng-value="12">12th Grade</ion-radio>


        <label class="item">
          <button class="button button-block button-positive" type="submit">Log in</button>
        </label>
      </div>
</form>

我的controllers.js：

    angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $localstorage) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/setgrade.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.modalOpen = function() {
    $scope.modal.show();
  };
    var grade = $localstorage.getObject('grade');
    if(grade === undefined){
        doLogin();
    };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function($scope, $localstorage) {
    console.log('Doing login', $scope.loginData);
    localStorage['grade'] = $scope.student)
  };
})

因此，总结一下，有没有办法让我拉出无线电列表的值，使其成为本地存储的变量，并在函数或if / else语句中调用本地存储的变量（并通过本地存储的变量），我的意思是存储在设备上，直到应用程序被删除）？如果本地存储的变量未定义，我还想用表单打开模态，如果不是，则保持关闭。

Answer 1

据我所知，您需要的更改如下：

// Inside controller definition
  var grade = $localstorage.getObject('grade');
  if(grade === undefined){
      $scope.doLogin(); // Was doLogin()
  }

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);
    $localstorage.setObject('grade', $scope.grade); // Was localStorage['grade'] = $scope.grade); // With extra closing paren
  };
})

这假设您有一个有效的$localstorage服务，其中提供了一个示例by the Ionic folks here。当然，这需要声明为您的应用程序的依赖项，如下所示：

angular.module('starter.controllers', ['ionic', 'ionic.utils'])

这里假设$localstorage服务是在iconic.utils内定义的。如果需要，它可能在其他地方。

我在桌面in this Plunker上使用Chrome浏览器，但我不确定这是否会转换为您的应用。

我后来注意到你问题的一部分，你说你希望将模态显示为doLogin函数的一部分。我抬起docs on Ionic modal并在a separate Plunker上玩了一会儿，最终落在了我认为你要去的地方。

完整的控制器在这里：

 angular.module('starter.controllers', ['ionic', 'ionic.utils'])
.controller('AppCtrl', function($scope, $ionicModal, $localstorage) {
  $scope.grade = $scope.storedGrade = $localstorage.get('grade');
  $scope.loginData = { name: "", grade:  $scope.grade};

  $scope.modalOpen = function() {
    console.log("Modal Opening");
    $scope.loginData.grade = $scope.grade;
    $scope.modal.show();
  };

  $scope.modalClose = function() {
    $scope.grade = $scope.loginData.grade;
    $scope.modal.hide();
    console.log("Modal Closed");
    $localstorage.set('grade', $scope.grade);
    $scope.storedGrade = $localstorage.get('grade');
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData.name);
    $scope.modalOpen();
  };

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('setgrade.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
    if(typeof $scope.grade === "undefined"){
      $scope.doLogin();
    }
  });
});

我正在玩控制器内的定义顺序，因为Ionic正在抛出一些unexpected token undefined错误。基本上，如果您存储的数据很简单（单个字符串或数字），则应使用$localstorage.get和$localstorage.set代替getObject和setObject。我在modalOpen函数中调用doLogin，然后处理modalClose函数中模态的输入。

由于您在结束时遇到了跨站点安全性错误，因此我按照Ionic模式文档中的示例将模态模板嵌入到主HTML页面的脚本标记中。

如何从AngularJS表单输入中创建一个永久变量？

1 个答案: