以angular js爲JSON數組動態添加字段

Question

我有兩個JSON數組，一個用於標題，另一個用於數據。我正在處理標題，現在我正在使用ng-repeat顯示數據。工作正常。但是，我想從視圖中動態添加數據到$ scope.data。我在表格的最後一行中創建了一個按鈕，點擊它上面的「添加行」，將填充最後一行，每列輸入一列。從這裏進一步，我沒有找到方法繼續......因爲我是角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> 

我什麼都想要我，在輸入框中鍵入從$ scope.headerAll採取了相應的報頭中的$ scope.data被推動;

謝謝。

Answer 1

Here是一個示例，其中對<input>字段的每次更新都直接更新數據陣列中的新對象。保存按鈕僅隱藏<input>字段。我認爲更好的方法是驗證保存函數中的數據，並且只在數據正確時才推送它。因此，我沒有刪除以下行

//$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; 
    } 
} 

希望有所幫助。