AngularJS Edit Data/Form

Question

I'm looking to make a form on AngularJS to edit a database row accessed via a REST API. I have no problems accessing the data, what I really have an issue is configuring the form for editing. How would I be able to display the data and if the user clicks the submit button, be able to update the data. Below is my Angular code.

   countryApp.controller('EditLocation', function($scope, $http, $routeParams, $location) { 
      //get the item information
      var id = $routeParams.locid; 
      $scope.activePath = null;    

      $http.get('http://localhost/slimtest2/location/'+id).success(function(data) { 
        $scope.location = data;  

      }); 

      $scope.editrel = function() { 
          var editData = { 
              location_title : $scope.l.location_title, 
              location_latitude : $scope.l.location_latitude, 
              location_longitude : $scope.l.location_longitude     
          } 

          //convert data to JSON string
          var loce = JSON.stringify(editData); 


          $http.put('http://localhost/slimtest2/location/edit', loce); 

      }

      $scope.reset = function() { 
        $scope.location = data; 
      } 


    });

HTML - Edit Form

<div ng-controller="EditLocation"> 

   <form name="editform" ng-submit="editrel()"> 
      <div ng-repeat="l in location.location">  
     <label for="location_title">Location Title</label>
     <input type="text" ng-model="l.location_title"> 
     <br/> 
      <label for="location_latitude">Location Latitude</label>
     <input type="text" ng-model="l.location_latitude"> 
     <br/> 
        <label for="location_longitude">Location Longitude</label>
     <input type="text" ng-model="l.location_longitude"> 
     <br/>  


      <input type="submit" value="Submit"> 
      <input type="button" ng-click="reset()" value="Reset"></input>
     </div> 
    </form>
</div>

Can you share your HTML form code, just to be sure if the ng-model's are correct? — Tomislav
– Tomislav, Commented Aug 1, 2015 at 13:24
You can check @Exo answer, just call $http.get againe after $http.put did it's job. Your model will refresh. — Tomislav
– Tomislav, Commented Aug 1, 2015 at 13:30

Zachary Kuhn · Accepted Answer · 2015-08-01 13:24:29Z

5

If your put response does not include the new location data, you can get the data by doing this:

$http.put('http://localhost/slimtest2/location/edit', loce).success(function () {
  $http.get('http://localhost/slimtest2/location/'+id).success(function(data) { 
    $scope.location = data;  
  });
});

answered Aug 1, 2015 at 13:24

Zachary Kuhn

1,1526 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Edit Data/Form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related