如何使用 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