Question

如何获取存储在localstorage中的对象

这是我的HTML：

<div class="card" ng-repeat="sign in monobjet_json.List">
  <ion-item>
  <div class="video-container">
    <img  ng-src="{{sign.src}}" width="200" height="150"/>
  </div>
  <div class="item item-icon-left assertive">
    <i class="icon ion-android-document"></i>
    {{sign.texte}}
  </div>
  </ion-item>
</div>

Answer 1

从js代码上的本地存储访问数据不直接形成html。首先检查数据是否已经存储在存储中，以便您可以直接访问它而不进行后端调用，如果不存在，则调用后端，获取数据并将其存储在本地存储中。

app.controller('LoginCtrl', function($scope, $http){ 
     var item =  localStorage.getItem("object") 
     if(item) {
       $scope.monobjet_json = items;
     }
     else {
      $http.get('signs.json').then(function(res) { 
       $scope.signs = res.data; 
       $scope.monobjet_json = JSON.stringify(res.data); 
       localStorage.setItem("object", $scope.monobjet_json); 
     }); 
    }

Answer 2

我的建议是创建一个角度服务，它从源处理json有效负载并返回json数据的js对象表示。这可能包含您的值数组作为属性。

服务：

return $http.get({'... your endpoint here'})

控制器：

var ctrl = this;
service.getJson()
  .then(function(res){
    ctrl.list = res.data
  }

现在在html中你只需绑定你的ng-repeat来获得你的图像src。注意：$ ctrl表示使用angular组件else将$ ctrl替换为控制器作为var。

<div class="card" ng-repeat="sign in $ctrl.list">
<ion-item>
<div class="video-container">
<img  ng-src="{{sign.src}}" width="200" height="150"/>
</div>
<div class="item item-icon-left assertive">
<i class="icon ion-android-document"></i>
{{sign.text}}
</div>
</ion-item>
</div>

Answer 3

试试这个：

$http.get('signs.json').then(function(res){
    $scope.signs = res.data; 
    localStorage.remove('object');
  if(localStorage.getItem('object') == null){
  var monobjet_json = JSON.stringify(res.data.json());
  localStorage.setItem("object",monobjet_json);
 }
});

 if( localStorage.getItem('object') != null){
   var monobjet_json = JSON.parse(localStorage.getItem("object"));
   var List = monobjet_json.List;// TODO: get some of data from json object
 }

});

如何将ng-repeat与存储在localStorage中的JSON文件一起使用

3 个答案: