CODEWITHSUNDEEP
angularjs
Robert
Robert

Reputation: 4406

How to return the updated table data to the server?

I have a table of data on a web page that is populated with 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>

As you can see these fields are editable. What I want to do is when you click the update button send the UPDATED JSON data back to the server.

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

Under the covers this just posts to a WebApi Controller. The call to the controller works fine.

My problem is with the data that is passed to it. This sends the original data to the controller not any property that you may have changed. How do I pass the UPDATED properties back to the controller?

Upvotes: 0

Views: 53

Answers (1)

Thierry
Thierry

Reputation: 5233

You have to use ng-model to bind data entered. example with an input:

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

With contenteditable, it's a bit more complicated, you have to create or use a directive, like https://github.com/akatov/angular-contenteditable, or http://ngmodules.org/modules/ng-contenteditable for example.

Upvotes: 2

Related Questions