Отправить запрос ajax в angularjs с данными

Question

У меня есть форма, как показано ниже. Здесь я взял значение каждого элемента и отправил его на сервер через ajax-вызов. Является ли их простой способ отправить запрос на сервер, используя все значения в форме? Я новичок, пожалуйста, помогите. У моей формы очень много элементов, которые очень сложно взять ценность всего элемента, является ли их альтернативным методом?

<div ng-app="Myapp"> 
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> 
    <script> 
     var Myapp = angular.module('Myapp', ["ngRoute"]); 
    </script> 

    <div ng-controller="orderFormController"> 
     Item1<input type="text" name="item1" ng-model='item1'><p></p> 
     Item2 <input type="text" name="item2" ng-model='item2'><p></p> 
     Item3 <input type="text" name="item3" ng-model='item3'><p></p> 
     Item4 <input type="text" name="item4" ng-model='item4'><p></p> 
     Item5 <input type="text" name="item5" ng-model='item5'><p></p> 
     <button type="button" ng-click='saveAll()' >SAVE ORDER</button> 
    </div>  
    <script> 
     Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) { 

       var data = {}; 
       $scope.saveAll = function() { 
        data = {'item1': $scope.item1,'item2': $scope.item2,'item3': $scope.item3,'item4': $scope.item4} 
        $http.post("order/save/", data 
         ).success(function (res, status, headers, config) { 
        if (res == 'success') 
        { 
         $scope.message = res; 
        } 
        else 
        { 
         $scope.message = res; 
        } 
       }).error(function (res, status) { 
        $scope.message = res; 
       }); 
       } 

      }]); 

    </script>    

Answer 1

Поместите родительский объект в область действия и привяжите к нему свои свойства. Родительский объект - это то, что вы отправляете.

<div ng-app="Myapp"> 
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> 
    <script> 
     var Myapp = angular.module('Myapp', ["ngRoute"]); 
    </script> 

    <div ng-controller="orderFormController"> 
     Item1<input type="text" name="item1" ng-model='data.item1'><p></p> 
     Item2 <input type="text" name="item2" ng-model='data.item2'><p></p> 
     Item3 <input type="text" name="item3" ng-model='data.item3'><p></p> 
     Item4 <input type="text" name="item4" ng-model='data.item4'><p></p> 
     Item5 <input type="text" name="item5" ng-model='data.item5'><p></p> 
     <button type="button" ng-click='saveAll()' >SAVE ORDER</button> 
    </div>  
    <script> 
     Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) { 

       var data = {}; 
       $scope.data = data; 
       $scope.saveAll = function() { 
        $http.post("order/save/", data 
         ).success(function (res, status, headers, config) { 
        if (res == 'success') 
        { 
         $scope.message = res; 
        } 
        else 
        { 
         $scope.message = res; 
        } 
       }).error(function (res, status) { 
        $scope.message = res; 
       }); 
       } 

Answer 2

Правильный путь просто отправить свою модель на сервер, используя $resource (для отдыха)

<div ng-controller="orderFormController"> 
    Item1 
    <input type="text" name="item1" ng-model='item.item1'><p></p> 
    Item2 
    <input type="text" name="item2" ng-model='item.item2'><p></p> 
    Item3 
    <input type="text" name="item3" ng-model='item.item3'><p></p> 
    Item4 
    <input type="text" name="item4" ng-model='item.item4'><p></p> 
    Item5 
    <input type="text" name="item5" ng-model='item.item5'><p></p> 

    <button type="button" ng-click='saveAll()' >SAVE ORDER</button> 
</div> 

$scope.item.$save(function(data) { 

}); 

$item является angularjs ресурс