Reputation: 1031
I created a service to update a list. The call to do the insert is working fine, but when the data comes back and I try to update the list, I am getting the error undefined is not a function
. That doesn't really tell me where the issue is, and I'm stumped.
Here is the call in the controller
$scope.createCategory = function (newCategory) {
CategoryService.createCategory(newCategory)
.then(function(category){
$scope.categoryNames.push({
asset_category_id: category.id , asset_type: category.name}
);
});
};
and here is the service:
createCategory: function(name){
var params = 'categoryName' + '=' + name.categoryName + '&';
var defObj = $q.defer();
params += 'method' + '=' + 'createCategory';
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
$http.post('cfc/category.cfc', params);
$http.success(function(data){
defObj.resolve(data);
});
return defObj.promise;
}
I'm guessing that the issue is at the .then
, but i'm not totally sure. Any suggestions?
Adding View:
<div class="panel">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Category Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="category in categoryNames">
<td>{{$index + 1}}</td>
<td>{{category.asset_type}}</td>
<td>
<span class="glyphicon glyphicon-wrench" data-ng-click="editCategory($index)"></span>
</td>
<td>
<span class="glyphicon glyphicon-remove" data-ng-click="removeCategory($index)"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6">
<div class="well">
<div class="h4">Create Category</div>
<div class="well">
<form role="role" data-ng-submit="createCategory(newCategory)">
<div class="form-group">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName" name="categoryName" placeholder="Category Name" data-ng-model="newCategory.categoryName"/>
</div>
<button type="submit" class="btn btn-primary btn-block">Add</button>
</form>
</div>
</div>
</div>
Upvotes: 1
Views: 82
Reputation: 75
The following should work. $http.post
is returning a promise, but instead of a then
, it has a success
. That's tripped me up before. If you return that promise, your code in the controller should work correctly.
createCategory: function(name){
var params = 'categoryName' + '=' + name.categoryName + '&';
params += 'method' + '=' + 'createCategory';
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
return $http.post('cfc/category.cfc', params)
.success(function(data){
return data;
});
}
Upvotes: 1
Reputation: 20155
first you dont even need $q
createCategory: function(name){
var params = 'categoryName' + '=' + name.categoryName + '&';
params += 'method' + '=' + 'createCategory';
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
return $http.post('cfc/category.cfc', params);
}
second you might need to use $scope.$apply , or not.
.then(function(category){
$scope.categoryNames = category;
$scope.$apply('categoryNames');
});
Upvotes: 0