保存并从angularjs中的本地存储中检索已保存的复选框值

时间:2015-05-20 11:58:44

标签: angularjs cordova local-storage onsen-ui

我是angularjs和phonegap的新手。我正在尝试构建一个应用程序,在页面上,用户可以从9个类别中选择一个类别。我在每个类别名称旁边放置一个复选框,供用户选择类别。选择几个类别(通过选中相应的复选框)后,用户可以按保存按钮保存类别。我的问题是如何保存所有这些类别以及如何检索它们?

这是我到目前为止的代码

<!--html code --> <!-- the items here the titles of the categories pulled from a data.js file-->
<div ng-repeat="row in items | partition:3">
<div ng-repeat="item in row"">
<input type="checkbox" ng-model="(item.title)">
<div>{{item.title}}</div>

<ons-button modifier="large" ng-click="savecategories()">Ready</ons-button>

/ * angularjs code * /

 app.controller('categoryController', function($scope) {
 $scope.savecategories = function() {
    if ($scope.category1)
     { 
        localStorage.setItem('category1', true);
    }
    else {
        localStorage.setItem('category2', false);
   if ($scope.category2)
     { 
        localStorage.setItem('category2', true);
    }
   else {
          localStorage.setItem('category2', false);
        }

   /*and so on */
      } 
   });

我尝试通过放置这行代码来查看它是否正常工作,以便我得到警报但没有运气。

var national = localStorage.getItem('category1');
window.alert(national);

我不确定我做错了什么。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

谢谢大家。我终于明白了。我刚刚添加了一个函数,每次选中或取消选中复选框时都会调用该函数。

<input type="checkbox" ng-model="item.value" name="item.title" ng-change="savecategories()">

在我的js文件中,我这样做了:

app.controller('HomeController', function($scope, Data, localStorageService) {

    $scope.items = Data.items;

    if (localStorageService.get('items')) {
        $scope.items = localStorageService.get('items');
    }

    $scope.SaveCategories = function () {
    localStorageService.clearAll();
    localStorageService.add('items',$scope.items);

    }