如何使用AngularJs为表格生成JSON以保存表格数据？

Question

我已经在AngularJS的帮助下创建了一个HTML。

<form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() --> 
    <input type="submit" value="Save" class="myButton" name="submit" style="margin: 0px;float:right;"> 

    <div class="category-placer2" style="width:100%"> 
     <div class="category-header-keywords"> 
     <div class="icon-add"><a href="#"><img src="images/icon-add.png" alt="Add" border="0" title="Add phone Number" /></a></div> 
     <div class="category-header-text" ><span ng-bind="dispName"></span></div> 
     </div> 
     <div class="category-base"> 
     <div class="keywordplacer"> 

      <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="keywordsList"> 
       <tr>     
        <th width="60%" colspan="2">Code Master Name</th> 
        <th width="30%" colspan="2">Status</th> 
       </tr> 
       <tr ng-repeat="type in codeMasterList"> 
        <td width="1%" class=""> 
         <input type="hidden" name="codeMasterId" value="{{type.codeMasterId}}" /> 
        </td> 
        <td width="60%" class=""> 
         <input type="text" name="keywordName" value="{{type.name}}" alt="Name of Keyword" size="60" > 
        </td> 
        <td width="30%" class=""> 
         <input type="radio" value="1" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 1) && ('true') || ('false')}}" />Active 
         <input type="radio" value="0" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 0) && ('true') || ('false')}}" style="margin-left:50px;" />Inactive 
        </td> 
       </tr> 
      </table> 

     </div> 
     <center> 
      <hr style=" background-color: #ABBFC6; height: 2px; width: 90%;"> 
      <input type="submit" value="Save" class="myButton" style="margin: 0px;"/> 
     </center> 
     <!-- <div class="table-index">P - Primary</div> --> 
     </div> 
    </div> 
</form> 

它将以可编辑模式显示值。

我想保存所有列表，只需点击一下保存按钮。我如何使用angularjs做这样的事情？

你能帮我生成名称以及单选按钮值的JSON数据吗？下面

是我的控制器：

keywordModule.controller('keywordTypeController',['$scope', '$http', 'keywordService', 
    function($scope, $http, keywordService) { 
     $scope.createAllKeywordsJSON = function() { 
      //alert($scope.codeMasterList.codeMasterId); 
      var tempItemList = []; 
      angular.foreach($scope.codeMasterList,function(item,index){ 
       tempItemList.push(item); 
      }); 
      alert(tempItemList); 
      /*keywordService.createAllKeywordsJSON().query(codeMasterList, 
        //Success Handler handler 
        function(data) { 

        }, 
        //Failure handler 
        function(error) { 

        } 
      );*/ 
      //alert(codeMasterList); 
     }; 
    } 
]); 

Answer 1

$scope.codeMasterList会为您的列表JSON数据。

您可以使用ng-model而不是value来更新表单字段的值。这也会将输入值直接绑定到列表中的项目。所以，那么你可以节省$scope.codeMasterList

HTML样品

<input type="text" ng-model="type.name" alt="Name of Keyword" size="60" > 

Working Fiddle