Javascript AngularJS：表格编辑数据+更新服务器

我已经使用AngularJS创建了一个表。在这个表中，我显示了我的数据库中的产品，这些产品可以根据类别或一些其他关键字进行过滤。现在，用户应该能够更改此表中的数据以更新数据库中的数据

安格拉斯

HTML表格

---

完成这项工作有什么想法或建议吗？

我喜欢使用的用于编辑数据的库是可编辑的

然后将其发回webapi保存

categorieFilter = angular.module("categorieFilter", [])
categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    store.getCategories().then(function(data){
        $scope.categories = data;
    })
    store.getProducts().then(function(data){
        $scope.products = data;
    })    

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };
}])

categorieFilter.factory('store', function($http, $q){
    function _getCategory (){
        var deferred = $q.defer();
        $http.get('api/categories').success(function (data) {
                deferred.resolve(data);
            })
        return deferred.promise;
    }

    function _getProducts (){
        var deferred = $q.defer();
        var prods = [];
        $http.get('api/products').success(function (data) {
            for(var i = 0;i<data.length;i++)
            {
                prods[i] = {name: data[i][0], category: data[i][2], price: data[i][1]};
            }
            deferred.resolve(prods);
        })
        return deferred.promise;
    }
        return {
         getCategories: _getCategory,
         getProducts : _getProducts
        };
});

<div ng-app="categorieFilter" ng-cloak="" ng-controller="catFilter">
<div class="input-group">
 <input type="text" name="table_search" class="form-control input-sm pull-right" ng-model="search" placeholder="Search"/>
<div class="input-group-btn">
 <button class="btn btn-sm btn-default">
  <i class="fa fa-search"></i>
 </button>
</div>
</div>
<div>
 <input type="submit" class="btn btn-success" style="margin:10px; width:30%;" ng-repeat="cat in categories" ng-click="filterProductsByCats(cat.categoryName)" value="{{cat.categoryName}}">
</div>
<table class="table table-hover">
 <tr style="background-color:#ddd;">
  <th colspan="4" style="text-align:left; font-size:16px;"> Category </th>
  <th colspan="4" style="text-align:left; font-size:16px;"> Product </th>
  <th colspan="4" style="text-align:left; font-size:16px;"> Price </th>
 </tr>
 <tr ng-repeat="product in products | filter:search | orderBy: 'category'">
  <td colspan="4">{{product.category}}</td> 
  <td colspan="4">{{product.name}}</td>
  <td colspan="4">{{product.price}}</td>
 </tr> 
</table>