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

Question

I have create one HTML with the help of AngularJS.

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

It will show value in editable mode.

I want to save all the list at a single click on save button. how can i do such thing using angularjs ?

Can you please help me to generate JSON data for the name as well as for radio button value ?

below is my controller:

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 would be the JSON data for your list.

You can update the value of the form fields by using ng-model instead of value . This also will bind the input values right back to the item in the list. So then you can just save $scope.codeMasterList

HTML Sample

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

Working Fiddle