CODEWITHSUNDEEP
javascriptangularjs
Anton
Anton

Reputation: 796

the form doesn't send updated input value

On my page I have bs-table. The data comes from api call. By click on row I send new api call to retrieve row data from db. Then I set scope variable for res data and render it on a page

$('#table').on('click-row.bs.table', function (e, row, $element) {

                $('.success').removeClass('success');
                $($element).addClass('success');

                var indexId = $table.find($element).data('index');
                var rowData = $table.bootstrapTable('getData')[indexId];
                $scope.id = rowData.id;

                $http.get(url + $scope.id)
                        .then(function (res) {
                            $scope.rowData = res.data.model;
                            console.log($scope.rowData);
                            $scope.rowKeys = Object.keys($scope.rowData);
                        });
                $scope.$apply();

            });

html: 

<form style="padding: 15px" ng-submit="submitForm()">
        <div class="form-group row">
               <div ng-repeat="k in rowKeys | filter: '!id'" ng-model="rowValue">
               <label for="rowValue"  class="col-sm-2">
               <!--{{k | hide:'.name'}}:-->
               {{k }}:
               </label>
               <div class=" col-sm-2">
               <input class="form-control rowValue"  id="rowValue"  value="{{rowData[k]}}"/>
               </div>
          </div>
    </div>
   <button type="submit" class="btn btn-default" ng-if="rowData" >Submit</button>

Then thru ng-submit I want to send back changes which have been made in that form

 $scope.submitForm = function() {

        $scope.$watch('rowData', function(newValue, oldValue) {
                console.log('being watched oldValue:', oldValue, 'newValue:', newValue);
            }, true);

        $http({
            method  : 'PUT',
            url     : url + $scope.id,
            data    : $scope.rowData, //form
            headers : {'Content-Type': 'application/json'}
        })
        .then(function (res) {
                //console.log(res);
                //console.log($scope.rowData);
                return res;
            });
    };

As you can see I've set $watch that to follow for changes in scope variable, but the problem is the console log returns same values for oldValue and newValue. Could anybody explain me where is my mistake? I appreciate any help

Upvotes: 0

Views: 143

Answers (2)

tanenbring
tanenbring

Reputation: 780

You're not binding the values to anything. Instead of using value="{{rowData[k]}}" on your input element, use ng-model: ng-model="rowData[k]".

Upvotes: 1

Kyle
Kyle

Reputation: 5547

You're calling $scope.$apply(); before the request has a chance to finish. You need to put $scope.$apply(); within the then() callback.

$http.get('stuff').then(function(response){
    //stuff
    $scope.$apply();
});

Upvotes: 0

Related Questions