Question

这是我的程序，用于动态地将名称联系人添加到json数据 该程序工作正常并显示在运行程序时添加数据我的列表对象但问题是数据无法保存在我的程序中请帮帮我

<!DOCTYPE html>
 <html ng-app="Myapp">
 <head>
 <meta name="viewpoint" content="width=device-width,intial-scale=1">
  <meta charset="utf-8">
   <link rel="stylesheet" href="D:\java practice\bootsrap\bootstrap.min.css">
  <script src="D:\java practice\bootsrap\bootstrap.min.js">
  </script>
  <script src="D:\java practice\bootsrap\jquery.min.js">
  </script>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" href="D:\java practice\bootsrap\bootstrap.min.css">
  <script src="D:\java practice\bootsrap\bootstrap.min.js">
  </script>
  <script src="D:\java practice\bootsrap\jquery.min.js">
  </script>
 <script src="D:\java practice\angular\angular2.js"></script>
 </head>

 <body>
<div ng-controller="Mycntrl">
<form class="form-inline" role="form">
Name:<input type="text" name="Name" ng-model="name" class="form-control" placeholder="Enter your Name">
Contact:<input type="text" name="contact" ng-model="contact" class="form-control" placeholder="Contact">
<ul ng-repeat="person in persons" ng-show="Myshow">
    <li>{{person.name}}</li>
    <li>{{person.contact}}</li>
</ul>
</form>
<button class="btn btn-default" type="button" name="Show" ng-click="Myfun()">Show</button>
<button class="btn btn-default" type="button" name="Save" ng-click="save()">Add Contact</button>
</div>
  <script>
var app=angular.module("Myapp",[]);
  app.controller("Mycntrl",function($scope) {
      $scope.name="";
      $scope.contact="";
      $scope.Myshow=false;
      $scope.persons=[
      {name:'Macha Devendher',contact:'1234567890'},
      {name:'Macha Devendher1',contact:'9876543210'},
      {name:'Macha Devendher2',contact:'1472583690'}
      ];

$scope.save=function() {
    if($scope.contact.length<10)
    {
        alert("Please enter valid contact number");
    }
    else {

    $scope.persons.push({ 'name':$scope.name,'contact':$scope.contact });
    $scope.name="";
    $scope.contact="";
    alert("You are contact number added succesfully");
    }
    }
    $scope.Myfun=function() {
       $scope.Myshow=!$scope.Myshow;
    }
  }
 );
  </script>
 </body>
</html>

Answer 1

为了处理我的 localstorage ，我创建了一个简洁的小服务API。它可以编写，删除，清除和使用时间戳来使对象失效。

也许这会对你有所帮助：

'use strict';

/**
 * storage wrapper for session- or local-storage operations
 */
app.factory('StorageService', function(
        $rootScope,
        $http,
        $location) {

    /**
     * get an item
     *
     * @param item - string - the item identifier
     * @return - mixed -
     */
    var get = function(item) {
        return JSON.parse(sessionStorage.getItem(item) ||localStorage.getItem(item));
    };

    /**
     * set an item
     *
     * @param item - string - the item identifier
     * @param value - mixed - the value to set
     * @param usePersistentStorage - boolean - the flag for session- or local-storage
     * @return void
     */
    var set = function(item, value, usePersistentStorage) {
        var obj = {
            value: value,
            ts: new Date().getTime()
        };
        window[usePersistentStorage ? 'localStorage' : 'sessionStorage'][value === null ? 'removeItem' : 'setItem'](item, JSON.stringify(obj));
    };

    /**
     * remove an item
     *
     * @param item - string - the item identifier
     * @return void
     */
    var remove = function(item) {
        set(item, null, true);
        set(item, null);
    };

    /**
     * clear the whole session- and local-storage
     *
     * @return void
     */
    var clear = function() {
        sessionStorage.clear();
        localStorage.clear();
    };

    /**
     * check if item has expired
     *
     * @return boolean
     */
    var checkExpiration = function(str, minutes) {
        var now = new Date(),
            nowts = now.getTime(),
            item = get(str);
        if(item && typeof item.ts != 'undefined' && (new Date(nowts) - new Date(item.ts) < minutes * 60 * 1000)) {
            return true;
        } else {
            remove(str);
            return false;
        }
    };

    return {
        get: get,
        set: set,
        remove: remove,
        clear: clear,
        checkExpiration: checkExpiration
    };
}

）;

使用angularjs动态地向json对象添加数据

1 个答案: