Question

我需要一个包含两个按钮的程序来增加和减少数字并显示它

以及关闭和打开应用后的存储和显示号码

Answer 1

对于存储数据，您可以使用angular-local-storage获取https://github.com/grevory/angular-local-storage

使用$scope.storageValue = localStorageService.get('StoreData');

加载数据保存数据

使用localStorageService.set('StoreData',$scope.storageValue);

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- save and load in Local -->
    <script src="js/angular-local-storage.min.js"></script>
    <script>
    angular.module('app', ['ionic','LocalStorageModule'])
        .controller('AppCtrl', function($scope, localStorageService) {
              // save and load
              $scope.storageValue = localStorageService.get('StoreData');
              // add salavat
              $scope.add=function(){
                  $scope.storageValue++;
                  localStorageService.set('StoreData',$scope.storageValue);
              }
              // sub salavat
              $scope.sub=function(){
                  $scope.storageValue--;
                  localStorageService.set('StoreData',$scope.storageValue);
              }
        })
    </script>
  </head>

  <body ng-app="app">
    <ion-content>
        <div style="height:100%; text-align:center" ng-controller="AppCtrl">
            <div class="item item-icon-left" href="#">
                <span>Number : {{storageValue}}</span> <br>
                <button class="button button-positive" ng-click="add()">
                  +
                </button>
                <button class="button button-positive" ng-click="sub()">
                  -
                </button>
            </div>
        </div>
  </ion-content>
  </body>
</html>

PIC

该程序包含两个按钮，用于增加和减少存储的值

1 个答案: