AngularJS：将数据发布到服务器

Question

我想使用AngularJS将数据添加到数据库中。 首先，我必须从服务器中获得的类别列表中选择一个类别。 之后，用户可以将产品添加到数据库。 我尝试使用以下方法完成此操作：

AngularJS

categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
    var serviceBase = 'api/';
    $http.get(serviceBase + 'categories').then(function (results) {
        $scope.categories = results.data;
        for(var i = 0; i < $scope.categories.length; i++){
            var categories = $scope.categories[i];
        }
        $scope.product = function($scope, $http, $catID){
        $http.post(serviceBase + 'productadd/3/1/Icetealemon/5').then(function(results){
        });
        }
    });
});

HTML

<table id="app2" ng-app="categories" ng-cloak="" class="table table-hover">
  <tr >
  <th colspan="5">Add product</th>
  </tr>
  <tr ng-form name="addproductForm" novalidate ng-controller="category">
  <td colspan="1">
  <select class="form-control m-b-10">
    <option ng-repeat= "c in categories">{{c.categoryName}}</option>
  </select>
  </td>
  <td colspan="1">
  <select class="form-control m-b-10">
    <option>Antwerpen</option>
    <option>Leuven</option>
  </select> 
  </td>
  <td colspan="1">
   <input type="text" class="form-control" placeholder="Name" ng-model="catID"></input>
  </td>
  <td colspan="1">
   <input type="text" class="form-control" placeholder="Price" width="10%"></input>
  </td>
  <td colspan="1">
   <input type="submit" class="btn btn-success" ng-click="product()"></input>
  </td>                                    
 </tr>
</table>  

我什至没有使用ng-models使用我的html的数据。 它仍然是硬编码的，因为那时它甚至不起作用。 我收到错误消息：

TypeError：无法读取未定义的属性“ post”

我的$ http.post在做什么？

Answer 1

categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
    var serviceBase = 'api/';
    $http.get(serviceBase + 'categories').then(function (results) {
        $scope.categories = results.data;
        for(var i = 0; i < $scope.categories.length; i++){
            var categories = $scope.categories[i];
        }
        $scope.product = function($scope, $http, $catID){


            // NOTE: This '$http' is $scope.product function parameter
            // variable `$http` not angular '$http'


            $http.post(serviceBase + 'productadd/3/1/Icetealemon/5').then(function(results){
        });
        }
    });
});

从$scope.product函数中删除$http参数。

另外，请参阅https://docs.angularjs.org/tutorial/step_05关于缩小期间的角度依赖性问题以及如何解决它的问题。