使用angularjs动态将数据添加到json对象

debugcn 发表于 Dev

玛莎·德文德

这是我的程序，用于向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>

唐朱威

为了处理本地存储，我创建了一个简洁的小服务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
    };
}