Angular 模型未通过 onChange 或 ng-change 更新到 localStorage
Angular model not updating into localStorage via onChange or ng-change
所以我完全接受我可能正在做一些非常、非常愚蠢的事情,但事情就是这样。
我使用具有 set() 和 get() 方法的 $localstorage api 将我的用户性别存储在 localStorage 中。我在 UI 中使用 angular 范围滑块,只是因为它看起来不错。
这是控制器中应该在启动程序时设置性别的代码,以及应该存储性别的函数。
来自离子公式页面。我不明白这一点:
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
我知道它在 $localstorage 上创建了一个 get() 方法,但我在让它工作时遇到了一些问题,这是因为我不理解它。
如果我用这个
$localstorage.get('gender');
如果什么都没有存储会怎样?看起来方法 get()s 来自 localStorage 的值或获取默认值。
所以如果我这样做:
get: function(key, defaultValue) {
return $window.localStorage[key] || 0;
},
当没有存储任何内容时,我应该将 0 作为默认值,是吗?还是我必须做其他事情?
我正在尝试使用它来存储用户性别。我这样初始化它:
$scope.usergender = $localstorage.get('storeGender');
console.log("Usergender on initialise is", $scope.usergender);
然后这样存储:
changeGender = function(){$localstorage.set('storeGender',$scope.usergender)
console.log("Usergender is now", $scope.usergender);
}
我的 html 看起来像这样:
<div class="item range range-assertive">
<i class="icon ion-male"></i> Male
<input type="range" name="gender" min="0" max="1" ng-model="usergender" onChange="changeGender()">
Female <i class="icon ion-female"></i>
</div>
目前我在控制台中得到的是:
Usergender on initialise is undefined.
即使在我使用范围滑块尝试更改内容后,这种情况仍然存在。我试过使用 ng-change 并得到同样的结果。
帮忙?
对于下面的代码,如果本地存储的密钥中没有任何内容,您将得到 null...
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
if(supports_html5_storage() ){
var value = localStorage.getItem(key);
return (value !== null) ? value : 0;
}
好的,我已经破解了。老实说,我不太确定该怎么做,但我这样做了:
我没有使用更改性别的函数,而是创建了一个通用函数:
$scope.changeVal = function(storeName, val){
$localstorage.set(storeName,val);
console.log(storeName + " is now " + val);
}
这允许我使用以下格式存储任何内容:
<input type="range" name="gender" min="0" max="1" ng-model="usergender" ng-change="changeVal('storeGender', usergender)">
您可以在其中将 storeGender 和 usergender 更改为您想要的任何内容。我现在用它来存储一堆其他设置。
诀窍在于添加
$scope
在函数前面。
注意:请记住,localStorage 仅存储字符串,因此如果您要存储数字,还必须像这样使用 parseInt():
$scope.userage = parseInt($localstorage.get('storeAge'));
所以我完全接受我可能正在做一些非常、非常愚蠢的事情,但事情就是这样。
我使用具有 set() 和 get() 方法的 $localstorage api 将我的用户性别存储在 localStorage 中。我在 UI 中使用 angular 范围滑块,只是因为它看起来不错。
这是控制器中应该在启动程序时设置性别的代码,以及应该存储性别的函数。
来自离子公式页面。我不明白这一点:
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
我知道它在 $localstorage 上创建了一个 get() 方法,但我在让它工作时遇到了一些问题,这是因为我不理解它。
如果我用这个
$localstorage.get('gender');
如果什么都没有存储会怎样?看起来方法 get()s 来自 localStorage 的值或获取默认值。
所以如果我这样做:
get: function(key, defaultValue) {
return $window.localStorage[key] || 0;
},
当没有存储任何内容时,我应该将 0 作为默认值,是吗?还是我必须做其他事情?
我正在尝试使用它来存储用户性别。我这样初始化它:
$scope.usergender = $localstorage.get('storeGender');
console.log("Usergender on initialise is", $scope.usergender);
然后这样存储:
changeGender = function(){$localstorage.set('storeGender',$scope.usergender)
console.log("Usergender is now", $scope.usergender);
}
我的 html 看起来像这样:
<div class="item range range-assertive">
<i class="icon ion-male"></i> Male
<input type="range" name="gender" min="0" max="1" ng-model="usergender" onChange="changeGender()">
Female <i class="icon ion-female"></i>
</div>
目前我在控制台中得到的是:
Usergender on initialise is undefined.
即使在我使用范围滑块尝试更改内容后,这种情况仍然存在。我试过使用 ng-change 并得到同样的结果。
帮忙?
对于下面的代码,如果本地存储的密钥中没有任何内容,您将得到 null...
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
if(supports_html5_storage() ){
var value = localStorage.getItem(key);
return (value !== null) ? value : 0;
}
好的,我已经破解了。老实说,我不太确定该怎么做,但我这样做了:
我没有使用更改性别的函数,而是创建了一个通用函数:
$scope.changeVal = function(storeName, val){
$localstorage.set(storeName,val);
console.log(storeName + " is now " + val);
}
这允许我使用以下格式存储任何内容:
<input type="range" name="gender" min="0" max="1" ng-model="usergender" ng-change="changeVal('storeGender', usergender)">
您可以在其中将 storeGender 和 usergender 更改为您想要的任何内容。我现在用它来存储一堆其他设置。
诀窍在于添加
$scope
在函数前面。
注意:请记住,localStorage 仅存储字符串,因此如果您要存储数字,还必须像这样使用 parseInt():
$scope.userage = parseInt($localstorage.get('storeAge'));