Question

我是JSON数据的新手，所以请帮帮我!! 我有单个网页，有多个表格，使用angularjs验证，我想为那些表单中的字段生成JSON数据。那么应该使用哪些方法来生成JSON数据并发布该方法的语法。

我的HTML代码就像

<div class="input-group col-sm-3">
                                <input type="text" id="fromDate" name="FromDate" onchange="updateMinToDate(); clearDatePopover();" class="form-control hospital_datepicker_From" autocomplete="off" placeholder="ÅÅÅÅ-MM-DD" value="@(Model.StatisticHospitalFilter.FromDate.HasValue ? Model.StatisticHospitalFilter.FromDate.Value.ToString("yyyy-MM-dd") : string.Empty)" required />
                                <span class="input-group-addon">t.o.m.</span>
                                <input type="text" id="toDate" name="ToDate" class="form-control hospital_datepicker_To" autocomplete="off" onchange="clearDatePopover();"placeholder="ÅÅÅÅ-MM-DD" value="@(Model.StatisticHospitalFilter.ToDate.HasValue ? Model.StatisticHospitalFilter.ToDate.Value.ToString("yyyy-MM-dd") : string.Empty)" required />
                            </div>

我的angularjs代码是

<td >
<input type="text"  style="width:100px" ng-model="cost"  ng-disabled="status!=true" required>
</td>
<td >
<input type="text"  style="width:110px" ng-model="price" ng-disabled="status!=true" required>
</td>

Answer 1

Angular允许您将ng-model字段绑定为对象的一部分。因此，不是将每个表单字段绑定到单个值。使它们成为单个对象中的属性。

<input type="text" ng-model="myForm.productName"/>

<input type="text" ng-model="myForm.productCount"/>

然后，您有一个JSON对象myForm，其中包含表单中的所有值，可以从controller访问。

Answer 2

了解ng-model以及双向绑定的工作原理。

<input type="text" ng-model="yourobj.name"  />
<form name="myForm" ng-click="submit()">

在您的controller中，您可以抓取下面的表单输入字段。

(function(){

   angular.module("yourapp").controller(['$scope', function(){

     $scope.submit=function(){
        var jsonData = $scope.yourObj;  
        console.log(jsonData); 
     }

   }])

})();

如何为angularjs中的表单字段生成json数据

2 个答案: