如何从AngularJS表单输入中生成一个永久变量

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

本文关键字：一个 变量 AngularJS 表单 输入      更新时间：2023-09-26

我在这个问题上遇到了很多麻烦，非常感谢您的帮助。

这是我的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>

还有我的控制器.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语句中调用本地存储的那个变量（我所说的本地存储变量，是指存储在设备上，直到应用程序被删除）？如果本地存储的变量是未定义的，我还想用表单打开模态，如果不是，则将其关闭。

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

// 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服务，这里的Ionic人员提供了一个示例。当然，这需要声明为应用程序的依赖项，如下所示：

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

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

我在这个Plunker的桌面上用Chrome操作，但我不确定这是否转化为你的应用程序。

我后来注意到你问题中的一部分，你说你想把模态作为doLogin函数的一部分来显示。我在Ionic modal上查阅了文档，在一个单独的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页面上的脚本标记中。

相关文章：