AngularJS JSON format

基于 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>

试试这个解决方案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>

另一种解决方案

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>