Question

我正在使用AngularJS并向我的用户显示表格中的产品。在这里，用户可以使用类别或其他关键词过滤表格。但是用户必须能够编辑产品表，例如编辑产品名称或价格，这些数据当然也必须在我的数据库中进行更改。现在我正在使用xeditable，它工作得很好，我能够得到我必须更改的productID，并且可以调用更改数据的函数，但这就是它。在这里你可以看到我的代码：

AngularJS

categorieFilter = angular.module("categorieFilter", ["xeditable"])
categorieFilter.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

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

    $scope.postname = function ($prodid){
        $http.get('api/editproduct/id/$scope.product.name')        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Category add error: ", status, data);
        });    
    };      

    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] = {id: data[i][0], name: data[i][1], category: data[i][3], price: data[i][2]};            
            }
            deferred.resolve(prods);
        })
        return deferred.promise;
    }
        return {
         getCategories: _getCategory,
         getProducts : _getProducts
        };

});

HTML

<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"  onaftersave="postname(product.id)" editable-text="product.name">{{product.name}}</td>
  <td colspan="4" editable-text="product.price">{{product.price}}</td>
 </tr> 
</table>

我（收到错误：

ReferenceError：$ http未定义

那我在这里做错了什么？在使用angular和xeditable在表格中更改数据库后，如何更新数据库中所需的数据？？

Answer 1

我更新了我的控制器和这样的功能，现在它工作正常：

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

    $scope.postname = function ($prodid, $prodname){
        alert($prodname);
        $http.get('api/editproduct/'+$prodid+'/'+$prodname)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Category add error: ", status, data);
        });    
    };

AngularJS xeditable：更新服务器数据

1 个答案: