Question

我有一个表单，该表单具有由ng-repeat创建的相似输入字段。

     <form name="userForm" id="userData">
         <div ng-repeat="accountItem in accounts">
             <div layout-gt-sm="row">
                <md-input-container class="" flex-gt-sm>
                    <label class="" ng-model="ctrl.accId" value="{{accountItem.id}}"><h3>{{accountItem.accountName}}</h3></label>
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>User ID</label>
                    <input data-ng-model="accountItem.username" disabled value="{{accountItem.id}}">
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Password</label>
                    <input data-ng-model="ctrl.zipcode" required>
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Confirm Password</label>
                    <input data-ng-model="ctrl.city" required>
                </md-input-container>
             </div>
         </div>
     </form>

这将创建一个表单，其中包含accounts数组中所有记录的输入字段。我想要的是创建一个json对象，当用户单击Submit时，包含所有数据，如下所示。

{
  {
    "id": 1,
    "username": "user1",
    "zipcode": "10660",
    "city": "abc"
  },
  {
    "id": 2,
    "username": "user2",
    "zipcode": "10660",
    "city": "def"
  },
  {
    "id": 3,
    "username": "user3",
    "zipcode": "10660",
    "city": "hij"
  },
  .
  .
  .
}

我尝试了许多方法，但最终都失败了，我是JavaScript新手，到处都在寻找解决方案。 $scope.accounts数组没有zipcode或city。当我单击提交时，我需要创建新的JSON结构，包括每个用户的那两个字段。

Answer 1

我认为ctrl.zipcode应该是accountItem.zipcode，而ctrl.city应该是accountItem.city。检查此代码，希望对您有所帮助。

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.accounts = [{
      id: 1,
      username: "user1"
    },
    {
      id: 2,
      username: "user2"
    },
    {
      id: 3,
      username: "user3"
    }
  ];

  $scope.go = function() {
    console.log($scope.accounts);
  };
});

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form name="userForm" id="userData">
    <div ng-repeat="accountItem in accounts">
      <div layout-gt-sm="row">
        <md-input-container class="" flex-gt-sm>
          <label class="" ng-model="ctrl.accId" value="{{accountItem.id}}"><h3>{{accountItem.accountName}}</h3></label>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>User ID</label>
          <input data-ng-model="accountItem.username" disabled value="{{accountItem.id}}">
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>Zipcode</label>
          <input data-ng-model="accountItem.zipcode" required>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>City</label>
          <input data-ng-model="accountItem.city" required>
        </md-input-container>
      </div>
    </div>
    <div>
      <input type="button" value="Go" ng-click="go()">
    </div>
  </form>
</body>

</html>

Answer 2

添加表单提交

<form name="userForm" id="userData" ng-submit="mySubmitFunction">
...
</form>

在您的angularjs应用代码上

$scope.mySubmitFunction = function(){
    var yourJson = angular.toJson($scope.accounts);
    console.log(yourJson);
}

或者如果您想在accounts和最终的json之间更改结构

$scope.mySubmitFunction = function(){
    // Create array who will store accounts with new structure
    var accountsForJson = [];
    // Loop on each existing account
    angular.forEach($scope.accounts, function(account, i) {
        // Create new structure for one account
        accountForJson = {
          id : account.id,
          username : account.username,
          zipcode : account.zipcode,
          city: account.city
        }
        // Add account with new structure into array
        accountsForJson.push(accountForJson);
    });
    var yourJson = angular.toJson(accountsForJson);
    console.log(yourJson);
}

将ng-repeat创建的表单转换为angularjs中的json对象

2 个答案: