时间戳

首页 > 解决方案 > 如何在angularjs的单选按钮中应用自动保存概念？

javascript - 如何在angularjs的单选按钮中应用自动保存概念？

问题描述

我正在尝试使用 sessionStorage 在 angularjs 中自动保存表单，它几乎实现了。刷新该页面时，在表单中输入的数据不应清除。但它不适用于单选按钮。任何人都可以有一个想法吗？

我的 HTML，单选按钮在 Male 中默认为 true。

<lable><input type="radio" ng-model="user.gender" value="true" ng-checked='user.gender==true'ng-change="save()" />Female</lable>  
 <lable><input type="radio" ng-model="user.gender" value="false" ng-checked='user.gender==false' ng-change="save()" />Male</lable>

js文件，

scope.save=function(){
    sessionStorage.setItem('user', JSON.stringify($scope.user));
    var xyz= JSON.parse(sessionStorage.getItem('user'));
}

这是plunkr

标签： javascriptangularjs

解决方案

看看这个 plunkr

angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
   $scope.save = function() {
    sessionStorage.setItem('user', JSON.stringify($scope.user));
   };
   $scope.checkSession = function(){
    if(sessionStorage.getItem('user')){
      $scope.user = JSON.parse(sessionStorage.getItem('user'));
    };
  }
}]);

我也更正了：

ng-checked="user.gender==='true'"

请注意，'true'现在是字符串之后JSON.parse()

HTML：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl" ng-init="checkSession()">
  <p>Write something in the input field:</p>
  <lable>
    <input type="radio" ng-model="user.gender" value="true" name="gender" ng-checked="user.gender==='true'" ng-change="save()" />Female</lable>  
 <lable>
   <input type="radio" ng-model="user.gender" value="false" name="gender" ng-checked="user.gender==='false'" ng-change="save()" />Male</lable> 

</div>

<script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope) {
      $scope.save = function() {
        sessionStorage.setItem('user', JSON.stringify($scope.user));
      };
      $scope.checkSession = function(){
        if(sessionStorage.getItem('user')){
          $scope.user = JSON.parse(sessionStorage.getItem('user'));
        };
      }
    }]);
</script>
</body>
</html>

推荐阅读