代码之家 › 专栏 › 技术社区 › Nishan

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

angularjs javascript

Nishan · 技术社区 · 7 年前

我有一个表单,它有类似的输入字段由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 对象,当用户单击提交时包含所有数据,如下所示。

{
  {
    "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 . 当我单击submit时,我需要为每个用户创建新的json结构,包括这两个字段。

2 回复 | 直到 7 年前

Saeed 7 年前

我想 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>

Camille 7 年前

添加表单提交

<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);
}