AngularJS - 刷新添加新记录收集/ DB名单后， [英] AngularJS - refresh list after adding new record to collection / db

问题描述

如何更新/刷新我的 $ scope.list 当一个新的记录添加到DB /收藏 - storage.set（） 法 - 请在code注释

请参见下面的code。

  angular.module（应用程序，[]）.factory（'储存'，函数（）{    变种存储= {};
    storage.get =功能（）{
        返回GetStuffHere（）;
    }
    storage.set =功能（OBJ）{
        返回SetStuffHere（OBJ）;
    }
    返回存储;
}）
.controller（MainCtrl功能（$范围，存储）{    $ scope.addStuff =功能（）{        VAR OBJ = {
            KEY1：DATA1
            KEY2：数据2
        };
        Storage.set（OBJ）;
       //更新$ scope.list这里，添加新记录后
    }
    $ scope.list = Storage.get（）;}）;
 

解决方案

下面是存储在服务作为阵列接收到的数据的方法。服务中使用的承诺，或者发送previously存储阵列中，如果存在的话，或做一个HTTP请求和存储响应和$使用HTTP承诺返回新存储阵列。

这现在允许存储阵列翻过其他控制器或指令共享。当添加，编辑或删除，现在它在服务中存储阵列上执行

  app.controller（'MainCtrl'，函数（$范围，存储）{
  Storage.get（功能（数据）{
    $ scope.items =数据
  }）;  $ scope.addItem =功能（）{
    Storage.set（{名称：'苏'}）;
  }
}）app.factory（'储存'，函数（$ Q $ HTTP）{    变种存储= {};
    storage.get =函数（回调）{
      / *看是否已经被缓存* /
      如果（！storage.storedData）{
        / *如果没有，请从Server的数据* /
        返回$ http.get（'data.json'），然后（功能（RES）{
          / *创建存储阵列将在整个应用程序*共享/
          storage.storedData = res.data;
          / *返回本地数组* /
          返回storage.storedData
        }），然后（回调）
      }其他{
        / *在高速缓存中，以便返回缓存的版本* /
        变种高清= $ q.defer（）;
        def.done（回调）;
        defer.resolve（storage.storedData）;
        返回def.promise;
      }
    }
    storage.set =功能（OBJ）{
     / *做AJAX更新和成功* /
        storage.storedData.push（OBJ）;
    }
    返回存储;
}）
 

<大骨节病> 演示

How do I update/refresh my $scope.list when a new record is added to the db/collection - storage.set() method - please see comment in the code.

Please see code below.

angular.module("app", [])

.factory('Storage', function() {

    var storage =  {};
    storage.get = function() {
        return GetStuffHere();
    }
    storage.set = function(obj) {
        return SetStuffHere(obj);
    }
    return storage;
})
.controller("MainCtrl", function($scope, Storage) {

    $scope.addStuff = function(){

        var obj = {
            "key1" : "data1",
            "key2" : "data2"
        };
        Storage.set(obj);
       // update $scope.list here, after adding new record
    }
    $scope.list = Storage.get();

});

解决方案

Here's approach that stores the received data in the service as array. Uses promises within service to either send previously stored array, if it exists, or make an http request and store response and using promise of $http return the newly stored array.

This now allows sharing of the stored array accross other controllers or directives. WHen adding, editing or deleting now it is done on the stored array in the service

app.controller('MainCtrl',function($scope, Storage){
  Storage.get(function(data){
    $scope.items=data
  });

  $scope.addItem=function(){
    Storage.set({name: 'Sue'});
  }
})

app.factory('Storage', function($q,$http) {

    var storage =  {};
    storage.get = function(callback) {
      /* see if already cached */
      if( ! storage.storedData){
        /* if not, get data from sever*/
        return $http.get('data.json').then(function(res){
          /* create the array in Storage that will be shared across app*/
          storage.storedData=res.data;
          /* return local array*/
          return storage.storedData
        }).then(callback)
      }else{
        /* is in cache so return the cached version*/
        var def= $q.defer();
        def.done(callback);
        defer.resolve(storage.storedData);
        return def.promise;
      }


    }
    storage.set = function(obj) {
     /* do ajax update and on success*/
        storage.storedData.push(obj);
    }
    return storage;
})

DEMO

这篇关于AngularJS - 刷新添加新记录收集/ DB名单后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！