Angularjs 在angular js中向JSON数组动态添加字段

我有两个JSON数组，一个用于标题，另一个用于数据。我正在处理标题，现在使用ng repeat显示数据。工作很好。但是，我想从视图中将数据动态添加到$scope.data。我在表格的最后一行创建了一个按钮，单击“添加行”按钮，将在最后一行中填充每一列的输入框。从这里开始，我没有找到继续下去的方法……因为我是angular js的新手

请帮帮我

HTML代码和JS粘贴在下面

'use strict';

angular.module('mean.system').controller('IndexController', ['$scope', '$http', 'Global','$window',
  function($scope, $http,$window) {


    $scope.header = [{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email','displayName':'Email Address','type':'required'}];
    $scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]
    $scope.optional = [];
    $scope.data=[{'first_name':'ruth','last_name':'vick','email':'ruthvick@gmail.com','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'rahul@gmail.com','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'vicky@gmail.com','isMarried':'no','nick_name':'vicky'}]
    $scope.headerAll.forEach(function(result){
        if (result.type === 'optional') {
          $scope.optional.push(result);
        }
    });
    console.log($scope.optional);
    $scope.addColumn = function(field){
      /*$scope.toPush = {'field':'marital', 'displayName':'married','type':'required'};
      $scope.header.push($scope.toPush);*/
      $scope.optional.forEach(function(result){
        if (result.field === field) {
          $scope.header.push(result);
        }
      });

    };
    $scope. deleteColumn = function(field,index){
        console.log(index);
        $scope.optional.forEach(function(result){
          console.log(result.field);
        if (result.field === field) {
           $scope.header.splice(index,1);
        }

      });

    };
    $scope.toPoint = function(index){
      $scope.index = index;
      console.log($scope.index);

    };
    $scope. editColumn = function(currentField,fieldToEdit,index){

      $scope.header.splice($scope.index,1);
      $scope.headerAll.forEach(function(result){
        if(result.field === fieldToEdit){
          $scope.header.splice($scope.index,0,result);
        }

      });      
    };
    $scope.showAddBtn = 'true';
    $scope.addRowButton = function(){
      $scope.showInput = 'true';
      $scope.showAddBtn = 'false';
    };
    $scope.cancel = function(){
      $scope.showInput = 'false';
      $scope.showAddBtn = 'true';
    };
    $scope.addRow = function(){
      $scope.headerAll.forEach(function(result){
        var x= result.field;
        console.log(x);
        $scope.rowObj = {
              x : x
        };
        console.log($scope.rowObj);                  
      });    
    };
  }
]);


<div>   
    <table class="table table-bordered table-hover">
        <thead class="wrapper">
            <tr>
                <th ng-repeat="data in header">
                    <div class="col-md-9">{{data.displayName}}</div>
                    <div class="col-md-1">
                        <button href=""   ng-click="deleteColumn(data.field,$index)"><span class=" glyphicon glyphicon-trash pull-right"> </span></button>
                    </div>
                    <div class="dropdown col-md-1" >
                      <button class="glyphicon glyphicon-pencil dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click = "toPoint($index);">
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
                        <li role="presentation" ng-repeat="dataEdit in headerAll"><a role="menuitem" tabindex="-1" href="" ng-click="editColumn(data.field,dataEdit.field,$index)">{{dataEdit.displayName}}</a></li>
                      </ul>
                    </div>
                </th>
                <th><div class="dropdown" >
                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                        Add Columns
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
                        <li role="presentation" ng-repeat="optionalHeader in optional"><a role="menuitem" tabindex="-1" href="" ng-click="addColumn(optionalHeader.field)">{{optionalHeader.displayName}}</a></li>
                      </ul>
                    </div>
                </th>

            </tr>
        </thead>

      <tbody >
        <tr class="active" ng-repeat="row in data">
            <td ng-repeat="fields in headerAll">
              {{row.fields.field}}
            </td>
        </tr>
        <tr>
                <td ng-repeat="fields in header">
                    <input type="text" ng-show="showInput" ng-model="input"></input>
                </td>
                <td>
                    <a href="" style="color:#63822E" ng-click="addRow()">
                        <h5 ng-show= "showInput"><span class="glyphicon glyphicon-ok"  ></span></h5>

                    </a>
                    <a href="" style="color:#63822E">
                        <h5 ng-show= "showInput" ng-click="cancel()"><span class="glyphicon glyphicon-remove" ></span></h5>
                    </a>
                    <a href= "" style="color:#63822E" ng-click = "addRowButton()" ng-show = 'showAddBtn'>
                        <h5 ><span class="glyphicon glyphicon-plus-sign"></span>
                                Add a new row 
                        </h5>
                    </a>
                </td>
            </tr>
    </tbody> 
    </table>
</div>

“严格使用”；
角度.module（'mean.system'）.controller（'IndexController'、['$scope'、'$http'、'Global'、'$window'，
函数（$scope、$http、$window）{
$scope.header=[{'field'：'first_name'，'displayName'：'first name'，'type'：'required'}，{'field'：'last_name'，'displayName'：'last name'，'type'：'required'}，{'field'：'email'，'displayName'：'email Address'，'type'：'required'}；
$scope.headerAll=[{'field'：'first_name'，'displayName'：'first name'，'type'：'required'}，{'field'：'last_name'，'displayName'，'type'：'required'}，{'field'：'email'，'type'：'required'}，{'field:'isMarried'，'displayName'：'婚姻状况'，'type'：'optional'}，{'field'：'nick_name'，'displayName'：'nick name'，'type'：'optional'}]
$scope.optional=[]；
$scope.data=[{'first_name'：'ruth'，'last_name'：'vick'，'email'：'ruthvick@gmail.com“，”isMarried“：”no“，”nick_name“：”ruthu“}，{”first_name“：”rahul“，”last_name“：”kumar“，”email“：”rahul@gmail.com“，”isMarried“：”no“，”nick_name“：”rahul“，”{“first_name:”vicky“，”last_name:”gupta“，”email“：”vicky@gmail.com“，”isMarried'：“no'，”nick_name'：“vicky'}]
$scope.headerAll.forEach（函数（结果）{
if（result.type===‘可选’）{
$scope.optional.push（结果）；
}
});
log（$scope.optional）；
$scope.addColumn=函数（字段）{
/*$scope.toPush={'field'：'monthly'，'displayName'：'monthly'，'type'：'required'}；
$scope.header.push（$scope.toPush）*/
$scope.optional.forEach（函数（结果）{
if（result.field==字段）{
$scope.header.push（结果）；
}
});
};
$scope.deleteColumn=函数（字段，索引）{
控制台日志（索引）；
$scope.optional.forEach（函数（结果）{
console.log（result.field）；
if（result.field==字段）{
$scope.header.splice（索引1）；
}
});
};
$scope.toPoint=函数（索引）{
$scope.index=索引；
log（$scope.index）；
};
$scope.editColumn=函数（currentField、fieldToEdit、index）{
$scope.header.splice（$scope.index，1）；
$scope.headerAll.forEach（函数（结果）{
if（result.field==fieldToEdit）{
$scope.header.splice（$scope.index，0，result）；
}
});      
};
$scope.showAddBtn='true'；
$scope.addRowButton=函数（）{
$scope.showInput='true'；
$scope.showAddBtn='false'；
};
$scope.cancel=函数（）{
$scope.showInput='false'；
$scope.showAddBtn='true'；
};
$scope.addRow=函数（）{
$scope.headerAll.forEach（函数（结果）{
var x=结果字段；
控制台日志（x）；
$scope.rowObj={
x:x
};
log（$scope.rowObj）；
});    
};
}
]);
{{data.displayName}



添加列



{{row.fields.field}

我希望我在输入框中键入的任何内容都被推送到$scope.data中，相应的标题取自$scope.headerAll

谢谢。

就是这样一个例子，对

字段的每次更新都会直接更新数据数组中的新对象。保存按钮只隐藏

字段。我认为更好的方法是在保存函数中验证数据，并且只在数据正确时按下它。因此，我没有删除以下行

//$scope.newObject = {};

//Maybe some validation
//$scope.data.push($scope.newObject);

HTML

<div ng-app ng-controller="Controller">
    <table>
       <tr>
           <th ng-repeat="header in headers">{{header.name}}</th>
        </tr>
        <tr ng-repeat="row in data">
            <td>{{row.firstname}}</td>
            <td>{{row.lastname}}</td>
            <td>{{row.gender}}</td>
        </tr>
        <tr ng-show="creatingObject">
            <td ng-repeat="header in headers">
                <input type="text" ng-model="newObject[header.field]">
            </td>
        </tr>
        <tr>
            <td></td>
            <td><button ng-show="creatingObject" ng-click="saveRow()">Save</button></td>
            <td><button ng-hide="creatingObject" ng-click="addRow()">Add Row</button></td>
        </tr>

    </table>
</div>

希望有帮助

function Controller($scope) {
    $scope.headers = [{ 'field': 'firstname', 'name': 'Firstname' }, 
                      { 'field': 'lastname', 'name': 'Lastname' }, 
                      { 'field': 'gender', 'name': 'Gender' }];

    $scope.creatingObject = false;

    $scope.data = [{'firstname': 'john', 'lastname': 'Doe', 'gender': 'male'} ];

    $scope.addRow = function() {
        //$scope.newObject = {};
        var length = $scope.data.push({});
        $scope.newObject = $scope.data[length - 1] ;
        $scope.creatingObject = true;
    }

    $scope.saveRow = function() {
        //Maybe some validation
        //$scope.data.push($scope.newObject);
        $scope.creatingObject = false;
    }
}