如何從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服務， 此處的Ionic人員提供了一個示例。 當然，需要將其聲明為應用程序的依賴項，如下所示：

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

在這里，假定$localstorage服務在iconic.utils內部iconic.utils 。 如果需要，它可以在其他地方。

我可以在此Plunker的台式機上的Chrome 中使用它 ，但是我不確定它是否可以轉換為您的應用。

后來，我注意到您的問題中的一部分，您表示希望將模式顯示為doLogin函數的一部分。 我查找了有關Ionic模態的文檔，並在另一個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主頁上的script標簽中。