javascript - 如何创建 Angularjs 部分更新(补丁)？

Question

我是 Angular 新手， 有一个管理一些客户数据的应用程序，它是一个存储在 localStorage 中的 json 文件， 我如何在服务中创建部分更新补丁(delta)方法。

还需要错误处理。

json:

[
    {"id":1,"name":"Gigi", "lastname":"DS", "hobby":"football", "age":"1987/06/04"},
    {"id":2,"name":"John", "lastname":"Ciobanu", "hobby":"basball", "age":"2001/12/05"},
    {"id":3,"name":"George", "lastname":"Doe", "hobby":"rugby", "age":"2003/05/09"},
    {"id":4,"name":"Dean", "lastname":"Smith", "hobby":"tenis", "age":"2000/03/06"},
    {"id":5,"name":"Kelly", "lastname":"Ambrose", "hobby":"sweem", "age":"1986/09/12"}
]

HTML:

<form name="part-update" novalidate>
       <input type="number" class="number" name="id" value="{{customer.id}}" ng-model="customer.id" disabled />
       <input type="text" name="name" value="{{customer.name}}" ng-model="customer.name" />
       <input type="text" name="lastname" value="{{customer.lastname}}" ng-model="customer.lastname" />
       <input type="text" name="hobby" value="{{customer.hobby}}" ng-model="customer.hobby" />
       <input type="text" name="age" value="{{customer.age}}" ng-model="customer.age" />
       <button class="btn btn-success btn-xs" ng-click="quickSave(customer)">save</button>
       <button class="btn btn-danger btn-xs" ng-click="close()" >cancel</button>
</form>

Controller :

.......
$scope.quickSave=function(c){
  customerData.quickUpdate(c);
  $scope.quickEdit = false;
  $scope.customer={};
  refresh();
}
.......

服务:

articleServices.factory("customerData",["$http",'LS','$q','$filter','$log',function($http,LS,$q,$filter,$log){
     var baseUrl = 'jsondata/customers.json';
     var dataLoad = null; 

    // throw('test');
     init();
     return{       
         ............
       //partial update
         quickUpdate: function(c){
            return dataLoad.then(function(data){
                  ???????????????????
            });
         }


}
     function init(){
         customers = LS.getData("cutomers");
         if(customers){
            dataLoad = $q.resolve(customers);
         }

         else
             dataLoad = $http.get(baseUrl).then(function(response){
                LS.setData(response.data,"cutomers");

                return response.data;
            }).catch(function(e) { throw { status: e.staus, message: e.statusText }});
            dataLoad.catch(onError);

         return dataLoad;        

     }

     function onError(error){
         $log.error();

        $log.error({ status: error.status, message: error.message, source: 'customerData'});
     }

 }]);

Answer 1

我找到了部分更新的解决方案

(angular.merge -> 合并 2 个对象)

var obj1 = {
  'name': 'George',
  'lastName': 'Doe'
}

var obj2 = {
  'name': 'Gregor',
  'age': '20'
}

var result = angular.merge({},obj1,obj2);

result={
  'name': 'Gregor',
  'lastName': 'Doe',
  'age': '20'
}

对于这个特殊情况:

quickUpdate: function(c){
    return dataLoad.then(function(data){
       for(var i=0;i<data.length;i++){
            if(data[i].id==c.id){
              data[i] = angular.merge({},data[i],c);
              break;
            }
        }
      return data[i];
    });
  }

仍然需要错误处理:)