Question

我在网页上有一个数据表，其中填充了angular：

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Service</th>
            <th>Rate Type</th>
            <th>Surcharge Name</th>
            <th>Account Number</th>
            <th>Rate Group</th>
            <th>Origin Country</th>
            <th>Destination Country</th>
            <th>Domestic / International</th>
            <th>Zone</th>
        </tr>
    </thead>               
    <tbody>
        <tr ng-repeat="template in templates">
            <td contenteditable="true">{{template.Service}}</td>
            <td contenteditable="true">{{template.RateType}}</td>
            <td contenteditable="true">{{template.SurchargeName}}</td>
            <td contenteditable="true">{{template.AccountNumber}}</td>
            <td contenteditable="true">{{template.RateGroup}}</td>
            <td contenteditable="true">{{template.OriginCountryCode}}</td>
            <td contenteditable="true">{{template.DestinationCountry}}</td>
            <td contenteditable="true">{{template.DomesticOrInternational}}</td>
            <td contenteditable="true">{{template.Zone }}</td>
        </tr>
    </tbody>
</table> 
<button class="btn btn-success" ng-click="updateTemplates()">Update</button>

如您所见，这些字段是可编辑的。我想要做的是当你点击更新按钮时将UPDATED JSON数据发送回服务器。

  $scope.updateTemplates = function () {
        templateService.updateTemplates($scope.templates);
    }

在封面下，这只是发布到WebApi控制器。对控制器的调用工作正常。

我的问题在于传递给它的数据。这会将原始数据发送给控制器，而不是您可能已更改的任何属性。如何将UPDATED属性传递回控制器？

Answer 1

您必须使用ng-model绑定输入的数据。输入示例：

<input type="text" ng-model="template.Service">

有了contenteditable，它有点复杂，你必须创建或使用指令，例如https://github.com/akatov/angular-contenteditable或http://ngmodules.org/modules/ng-contenteditable。

如何将更新的表数据返回给服务器？

1 个答案: