如何使用angularJS将表单字段中的多个行值发送到web api

时间:2017-10-06 07:51:17

标签: javascript angularjs asp.net-web-api2

我想通过web api

在angularJS控制器中插入多行值
<tr ng-repeat="rt in xxtt">

      <td>
    <input type="text" class="form-control" ng-model="rt .name" required />
     </td>
    <td>`enter code here`
     <input type="text" class="form-control" ng-model="rt .email" required />
     </td>
    </tr>
    <button class="btn" ng-click="btnSave()">
    Save
    </button>

$scope.newarray=[];
params = {
            "id": $scope.id

            "nameList": [
                    {
                        "name": $scope.name

                    }
            ]
        }     
angular.forEach($scope.nameList, function (response) {
                    $scope.newarray.push({ name: response.name });
                });
params = JSON.stringify(params);        
        alert(params);
        LoadSvc.LoadData(params).then(function (response) {  
}   

我可以一次添加多个行值 如何将angularjs中的数组值列表发送到web api

1 个答案:

答案 0 :(得分:0)

首先,你的html无效,这就是你的ng-repeat可能无法正常工作的原因。您必须将<tr></tr>包裹在<table></table>中。此外,为了通过web api向服务器发送数据,您应该使用$http服务。更具体地说,如果你需要“创建”新的东西,你可以使用POST方法。

有关详细信息,请查看$http service documentation

要结束您的btnSave()应该执行此操作并使用$http服务。

您的最终代码可能看起来像这样。

<强>模板

<div ng-app="app" ng-controller="AppController">
  <table>
    <tr ng-repeat="rt in xxtt">
      <td>
        <input type="text" class="form-control" ng-model="rt.name" required />
      </td>
      <td>`enter code here`
        <input type="text" class="form-control" ng-model="rt.email" required />
      </td>
    </tr>
  </table>
  <button class="btn" ng-click="btnSave()">
    Save
  </button>
</div>

<强>控制器

 $scope.btnSave = function() {

            /** You have to use your endpoint here **/
      $http.post('some-endpoint.com', $scope.xxtt).then(function(response) {
                    alert("I've posted data successfully");
            },function() {
          alert("I've failed to post data");
      });

  }

这是working sample of your code.