CODEWITHSUNDEEP
javascriptangularjs
albertogallego
albertogallego

Reputation: 121

Insert data into input value - AngularJS

I have a two functions like this:

$scope.showSerieById = function (id) {

 $http.get('/api/series/' + id) 
  .success(function(data, status, headers, config) {
    $scope.series = data;
        console.log(data);
    })
    .error(function(data, status, headers, config) {
        console.log('Error: ' + data);
    });
};

$scope.editSeries = function (id) {
  var data = { title :  $scope.title , season: $scope.season, chapter : $scope.chapter, mark : $scope.mark, image: $scope.image};

  $http.put('/api/series/' + id, data)
    .success(function(data, status, headers, config) {
        $scope.series.push(data);
        console.log(data);
    })
    .error(function(data,status,headers,config) {
        console.log('Error: ' + data);
    });
};

I'd like to know how to insert GET data (search by ID) into a form and then send it using PUT and update data. Form is the following (it's incorrect):

    <form data-ng-repeat="serie in series">
        <input type="text" ng-model="serie.title" value="{{series.title}}">
        <input type="text" ng-model="serie.season" placeholder="Season...">
        <input type="text" ng-model="serie.chapter" placeholder="Chapter...">
        <input type="text" ng-model="serie.mark" placeholder="Mark...">
        <input type="text" ng-model="serie.image" placeholder="Image...">
        </br></br>
        <button ng-click="addSeries()" class="btn">Add</button>
        <button ng-click="editSeries(serie._id)" class="btn">Update</button>
    </form>

Thank you so much!

Upvotes: 0

Views: 2072

Answers (1)

Huy Hoang Pham
Huy Hoang Pham

Reputation: 4147

Change the editSeries

<form data-ng-repeat="serie in series">
    <input type="text" ng-model="serie.title" value="{{series.title}}">
    <input type="text" ng-model="serie.season" placeholder="Season...">
    <input type="text" ng-model="serie.chapter" placeholder="Chapter...">
    <input type="text" ng-model="serie.mark" placeholder="Mark...">
    <input type="text" ng-model="serie.image" placeholder="Image...">
    </br></br>
    <button ng-click="addSeries()" class="btn">Add</button>
    <button ng-click="editSeries(serie)" class="btn">Update</button>
</form>

In the controller, the "serie" object is passed as parameter:

$scope.editSeries = function (serie) {
    $http.put('/api/series/' + serie.id, serie)
        .success(function(data, status, headers, config) {
            //$scope.series.push(data); //No need for push
            console.log(data);
        })
        .error(function(data,status,headers,config) {
            console.log('Error: ' + data);
        });
};

Upvotes: 1

Related Questions