如何使用Angular js 1将嵌套对象放入数据库？

Question

我是新来的Angular JS 1.在我的要求中，我试图使用API​​（PUT方法）将数据上传到mongoDB中。但我不确定如何定义嵌套对象。在我有地址字段的表单中，它有两个永久和邮政嵌套的对象。以下是更好理解的格式。

JSON数据：

"address" : { 
    "permanent" : { 
     "line1" : "geisenheimer", 
     "zip" : 14197, 
     "state" : "BW", 
     "Country" : "DE" 
    }, 
    "postal" : { 
     "line1" : "Sandwingert", 
     "zip" : 69123, 
     "state" : "BW", 
     "Country" : "DE" 
    } 
    } 

我想知道我在控制器如果它的正确方法定义的地址。

的index.html

<form class="form-horizontal"> 

       <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$error.required }"> 
        <label for="name" class="col-sm-2 control-label" >Name</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="name" ng-model="name" placeholder="Enter name as per SSLC marksheet" required> 
        </div> 
       </div> 
    <div class="form-group" ng-class="{ 'has-error': form.address.$dirty && form.address.$error.required }"> 
        <label for="address" class="col-sm-2 control-label">Address</label> 
        <div class="col-sm-5"> 
        <label style="padding-top:8px">Permanent Address</label><br> 
         <!-- <input type="text" class="form-control" id="name" placeholder="Full Name" ng-model="permanentfullname" required><br> 
         <input type="text" class="form-control" id="name" placeholder="Address Line 1" ng-model="permanentadd1" required><br> --> 
         <input type="text" class="form-control" placeholder="Address Line1" ng-model="address.permanent.line1" required><br> 
         <!-- <input type="text" class="form-control" id="name" placeholder="City/Town" ng-model="permanentcity" required><br> --> 
         <input type="text" class="form-control" placeholder="State" ng-model="address.permanent.state" required><br> 
         <input type="text" class="form-control" placeholder="Zip/Postal code" ng-model="address.permanent.zip" required><br> 
         <input type="text" class="form-control" placeholder="Country" ng-model="address.permanent.country" required><br> 
        </div> 

        <div class="col-sm-5"> 
         <label style="padding-top:8px">Postal Address</label><br> 
         <!-- <input type="text" class="form-control" id="name" placeholder="Full Name" ng-model="postalFullname" required><br> --> 
         <input type="text" class="form-control" placeholder="Address Line 1" ng-model="address.postal.line1" required><br> 
         <!-- <input type="text" class="form-control" placeholder="Address Line 2" ng-model="postaladd2" required><br> --> 
         <!-- <input type="text" class="form-control" placeholder="City/Town" ng-model="postalcity" required><br> --> 
         <input type="text" class="form-control" placeholder="State" ng-model="address.postal.state" required><br> 
         <input type="text" class="form-control" placeholder="Zip/Postal code" ng-model="address.postal.zip" required><br> 
         <input type="text" class="form-control" placeholder="Country" ng-model="address.postal.country" required><br> 
        </div> 
       </div> 

Controller.js

(function() { 
'use strict'; 

angular 
    .module('app') 
    .controller('userProfile.IndexController', function($scope,$http) 
{ 
    // var vm = this; 
    $scope.address = { 
    permanent { 
     line1: "" 
     zip: "" 
     state: "" 
     country: "" 
    }, 
    postal { 
     line1: "" 
     zip: "" 
     state: "" 
     country: "" 
    } 

    $scope.save = function() 
       { 

          $http.put('https://student.herokuapp.com/user/personalInfo', 
          {name : $scope.name, 
          dob : $scope.dob, 
          gender:$scope.gender, 
          line1:$scope.address.permanent.line1, 
          zip:$scope.address.permanent.zip , 
          state:$scope.address.permanent.state, 
          country:$scope.address.permanent.country, 
          line1:$scope.address.postal.line1, 
          zip:$scope.address.postal.zip , 
          state:$scope.address.postal.state, 
          country:$scope.address.postal.country 
    }).success(function(response) 

          {  
          console.log(response); 
          $scope.name= ""; 
          $scope.dob= ""; 
          $scope.gender= ""; 
          $scope.permanent.line1= ""; 
          $scope.permanent.zip = ""; 
          $scope.permanent.state= ""; 
          $scope.permanent.country= ""; 
          $scope.postal.line1= ""; 
          $scope.postal.zip = ""; 
          $scope.postal.state= ""; 
          $scope.postal.country= ""; 

         } 
         );               


       } 
    }) 
})(); 

Answer 1

我不知道我理解的问题。看起来你的$scope.address已经按照你想要的方式格式化了。

您应该只能使用$scope.address变量，因为它绑定到您希望PUT的对象。

$http.put('https://student.herokuapp.com/user/personalInfo', $scope.address)

Answer 2

使用本

Name : <input type="text" ng-model="name"> 
<button ng-click="submitFormAngular()">Calculate</button> 

和

var app = angular.module('formapp', []); 
    app.controller('formctrl', function ($scope, $http) { 
     $scope.name = 'MyName'; 
     $scope.submitFormAngular = function() { 
      var name = $scope.name; 
      var data = {}; 
      data.name = name; 
      //var data = { 'id': 10 }; 
      var url = '/Home/AngularAjax'; 
      $http({ 
       method: 'PUT', 
       url: url, 
       data: data //forms user object 
       // headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
      }).success(function (data) { 
       console.log(data); 
      }); 


     }; 

    }); 


      };