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

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'])

这里假设在iconic.utils里面定义了$localstorage服务。如果需要，它可以在其他地方。

我在 Chrome 桌面 in this Plunker 上使用它，但我不确定这是否适用于您的应用程序。

我后来注意到你的问题部分，你说你想将模态显示为 doLogin 函数的一部分。我查了 docs on Ionic modal and played around on 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。我在 doLogin 函数中调用 modalOpen，然后在 modalClose 函数中处理来自模态的输入。

由于您遇到了跨站点安全错误，我遵循了 Ionic 模态文档中的示例，并将模态模板嵌入到主 HTML 页面的脚本标记中。

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

How do I make a permanent variable out of AngularJS form input?

javascript

angularjs

ionic