AngularJS JSON 格式

Question

我是 AngularJS 新手，正在尝试根据表格 tr 和 td 的值制作格式化的 JSON。

表格 tr 是自动生成的。一旦提交表单，我会尝试生成 JSON 值。

在表单提交后，我需要生成 JSON。

<form>

    <table>
        <!-- Auto generated rows -->
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
    </table>
   <input type="submit" name="save" value="save"/>
   </form>

我有一个包含3行的表格，因此我需要生成3个对象数组的JSON。

"data" : [
 {
    "tname":"{tr1 name}",
    "value":"{tr1 tvalue}",
    "ttype":"{tr1 ttype}",
    "index":"index 1"
    },
    {
    "tname":"{tr2 name}",
    "value":"{tr2 tvalue}",
    "ttype":"{tr2 ttype}",
    "index":"index 2"
    },
    {
    "tname":"{tr3 tname}",
    "value":"{tr3 tvalue}",
    "ttype":"{tr3 ttype}",
    "index":"index 3"
    }
]

如果我有10个表格行，那就意味着我需要生成一个新的行对象。 请问，有人能建议在AngularJS中正确的方法吗？

- RSKMR

---

自动生成意味着-表格行数会动态地发生变化。 - RSKMR

行数无关紧要...它们是如何生成的？ - charlietfl

@charlietfl - 我们在顶部有一个文本框（我没有包含HTML代码）。如果我输入数字3，那么就会生成三行。一旦用户点击提交按钮，就需要生成JSON数据。 - RSKMR

@charlietfl - 抱歉。我现在会解释。我有默认的2行。第二行有一个加号按钮。点击加号后，我会生成（克隆）一行并将其附加。 - RSKMR

所以你是从空白表单开始对吧？ - charlietfl

Answer 1

尝试这个解决方案 jsfiddle。

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope) {
    $scope.arr = [];

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    <div ng-init="arr[0]={firstName:'123',lastName:'123'}">
      <input ng-model="arr[0].firstName">
      <input ng-model="arr[0].lastName">
    </div>
    <div ng-init="arr[1]={firstName:'234',lastName:'234'}">
      <input ng-model="arr[1].firstName">
      <input ng-model="arr[1].lastName">
    </div>
    <div ng-init="arr[2]={firstName:'567',lastName:'567'}">
      <input ng-model="arr[2].firstName">
      <input ng-model="arr[2].lastName">
    </div>
   <pre> json={{arr|json}}</pre>
  </div>
</div>

根据评论更新

示例 jsfiddle，基于输入生成行。

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope,$filter) {
    $scope.arr = [];
  $scope.change = function()
    {
    $scope.arr = $filter('range')($scope.arr,$scope.rowCount)
    }
  })
  .filter('range', function() {
    return function(arr, rowCount) {
       rowCount*=1;
      if(!rowCount || Number.isNaN(rowCount))
        return arr;
      console.log(Number.isNaN(rowCount))
      var resArray =arr;
      if (arr.length < rowCount) {
        for (var i = arr.length; i < rowCount; i++)
          resArray.push({});
      } else {
       resArray=[];
       for (var i = 0; i < rowCount; i++)
          resArray.push(arr[i]);
       console.log(resArray);
      }
      return resArray;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    <input ng-model="rowCount" ng-change="change()">
    <div ng-repeat="item in arr">
      <input ng-model="item.firstName">
      <input ng-model="item.lastName">
    </div>
    <pre>json = {{arr|json}}</pre>
  </div>
</div>

根据实际需求更新 SO

示例在 jsfiddle 上

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope,$filter) {
    $scope.arr = [];
  $scope.addRow = function()
    {
      $scope.arr.push({});
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    <div ng-repeat="item in arr">
      <input ng-model="item.firstName">
      <input ng-model="item.lastName">
    </div>
    <button ng-click="addRow()">
    Add row
    </button>
    <pre>json = {{arr|json}}</pre>
  </div>
</div>

- Stepan Kasyanenko

Answer 2

基于 jsFiddle SO 的解决方案。

示例请参见 jsfiddle。

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope, $filter) {
    $scope.cloneRow = function(comment) {
      $scope.finalJson.comments.push({});
    };
    $scope.finalJson = {
      comments: [{name:"Basic",type:"",value:"",index:1},
            {name:"house rent allowance",type:"",value:"",index:2},
                {}]
    };

    $scope.removeRow = function(index) {
      $scope.finalJson.comments.splice(index, 1);
    };
    $scope.submit = function() {
      var json = JSON.stringify($scope.finalJson.comments);
      console.log(json);
      alert(json);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    <table>
      <tr ng-repeat="comment in finalJson.comments">
        <td>
          <input ng-disabled="$index<2" type="text" ng-model="comment.name" class="form-control" value="" placeholder="Special Allowance" />
        </td>
        <td>
          <select ng-model="comment.type" class="form-control" name="">
            <option value="">-- Select an option--</option>
            <option value="Percentage" selected>Percentage</option>
            <option value="Percentage">Lumpsum</option>
          </select>
        </td>
        <td>
          <input type="text" ng-model="comment.value" class="form-control parsley-success">
          <input type="hidden" ng-model="comment.index" ng-show="(comment.index=$index) ||1==1" class="form-control parsley-success">
        </td>
        <td>
          <button ng-show="finalJson.comments.length>2 && $index>2" type="button" ng-click="removeRow($index)" class="btn btn-danger" data-type="plus">Minus
            <span class="glyphicon glyphicon-minus"></span>
          </button>
          <button  ng-hide="$index<2" type="button" ng-click="cloneRow()" class="btn btn-success btn-number" data-type="plus">Add
            <span class="glyphicon glyphicon-plus"></span>
          </button>
        </td>
      </tr>
    </table>
    <pre>{{finalJson.comments|json}}</pre>
    <button ng-click="submit()">
      Submit
    </button>
  </div>
</div>

- Stepan Kasyanenko

---

这是我的 jsFiddle。 - Stepan Kasyanenko

Answer 3

另一种解决方案

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope) {
    $scope.data = [];
    $scope.tType = ['test1', 'test2'];
    $scope.rowCount = 5; //number of rows you need
    $scope.range = function(min, max, step) {
      step = step || 1;
      var input = [];
      for (var i = min; i <= max; i += step) {
        input.push(i);
      }
      return input;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="firstCtrl">
  <form>
    <table>
      <tr ng-repeat="row in range(0,rowCount)">
        <td>
          <input ng-init="data[$index].tname =''" ng-model="data[$index].tname" type="text" class="form-control" name="tname_{{$index}}" value="">
        </td>

        <td>
          <select ng-init="data[$index].tType = ''" ng-model="data[$index].tType" class="form-control" name="ttype_{{$index}}">
            <option ng-selected="true">Select</option>
            <option value="bbb">Test</option>
            <option value="aaa">Lumpsum</option>
          </select>
        </td>

        <td>
          <input type="text" ng-init="data[$index].tValue=''" ng-model="data[$index].tValue" class="form-control parsley-success" name="tvalue_{{$index}}">
        </td>
      </tr>
    </table>
    <pre>json={{data|json}}</pre>
  </form>
</div>

- Immad Imtiaz