I am currently utilizing AngularJS to display products in a table for my users. Users have the ability to filter the table using categories or keywords. However, they should also be able to edit the product information within the table, such as product names or prices, and these edits need to reflect in the database as well. I am using xeditable for this functionality, and while I can retrieve the productID that needs to be changed and the function to alter the data is being called, I seem to encounter an issue beyond that point. Below is a snippet of my code:
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>
I'm encountering an error message:
ReferenceError: $http is not defined
If you have any advice on where I may be going wrong with my code and how I can successfully update the necessary data in my database after modifying it in my table using Angular and xeditable, please share your insights.