Form not updating in AngularJS

Question

I have a edit button in a form, when user clicks on the edit button, and edit the form and clicks on save. It gets updated. But when the user reloads the page, it does not update the page. So, here is my code below. All I want is when user edits the text in the form, there text gets updated even they reload the page. (Like, I want the JSON file gets that request too, if possible). Thanks in advance.

    <div class="list-view">
  <form>
    <fieldset ng-disabled="inactive">

  <legend>Basic Info</legend>

  <b>First Name:</b>
  <input type="text" ng-model="people.first">
  <br>
  <b>Last Name:</b>
  <input type="text" ng-model="people.last">
  <br>
  <b>Email:</b>
  <input type="email" ng-model="people.email">
  <br>
  <b>Phone:</b>
  <input type="num"  ng-model="people.phone">
  <br>
  <b>Website:</b>
  <input type="text" ng-model="people.website">
  <br>
  <b>Education:</b>
  <input type="text" ng-model="people.education">
  <br>
  <b>Education Year:</b>
  <input type="text" ng-model="people.year">

  <br>
  <legend>Address</legend>

<b>Street:</b>
  <input type="text" ng-model="people.street">
  <br>
  <b>City:</b>
    <input type="text" ng-model="people.city">
    <br>
    <b>State:</b>
      <input type="text" ng-model="people.state">
      <br>
      <b>Zip:</b>
        <input type="text" ng-model="people.zip">
    <br>
    </fieldset>
    <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
          Edit
        </button>
    <button type="submit" class="submit" ng-show="!inactive" ng-click="save()">Save</button>



</form>

app.js

    var app = angular.module("MyLab", ['ngRoute']);



app.controller('MyCtrl', function($scope, $rootScope) {
  $scope.inactive = true;



});

$scope.save = function() {
  $scope.people.push($scope.people.name);
}

Controller

        app.controller('MyController',['$scope', 'people', '$routeParams',
function($scope, people, $routeParams) {
  people.success(function(data) {
    $scope.people = data[$routeParams.id];

    $scope.save = function() {

      return people.editPeople()
      .then(function(data){
        $scope.datas = data.data; 
      })

    }


  });
}]);

Json file

    [
  {
    "id": "0",
    "first": "John",
    "last": "Doe",
     "title": "Family",
    "date": "Joined 4/2/17",
    "email": "[email protected]",
    "phone": "555-555-5555",
    "website": "www.google.com",
    "education": "Harvard",
    "year": "2008",
    "street": "123 Main Street",
    "city": "Los Angeles",
    "state": "CA",
    "zip": "1234567"


  },

]

index.html

    <!doctype html>
<html ng-app="MyLab">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>


   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="css/main.css" rel="stylesheet" />



  </head>
  <body>
  <div class="header">
      <div class="container">
          <h3>My Page</h3>
      </div>
    </div>


    <div class="main">
      <div class="container">
          <div ng-view>
          </div>
      </div>
    </div>



    <script src="js/app.js"></script>

      <script src="js/MyController.js"></script>




  </body>
</html>

Grabbing json

     app.factory('people', ['$http', function($http) {
  var services = {
    editPeople : editPeople
  }
  return services
  function editPeople() {

    $http({
        method: "POST",
        url: "people.json",
        data: {
          people: $routerParams.id
        },
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' }

    })

  }

Where your $scope.people.name of you ? And push is method of array . I think $scope.people of you is object — Akashii
– Akashii, Commented Apr 20, 2017 at 23:20
and yes it is an object. BUT, can you show me of how to apply the save() or update() method to my code. — John
– John, Commented Apr 20, 2017 at 23:25

Akashii · Accepted Answer · 2017-04-21 00:37:03Z

1

Here is example for update . You can use ajax to it . For example I use php in server-side

    .factory('people',...)
     var services = {
           editPeople : editPeople
}
      return services
     function editPeople(){
     $http({
                method: "POST",
                url: "model/update.php",
                data: {
                 people:$routeParams.id
                     },
               headers : { 'Content-Type': 'application/x-www-form-urlencoded' }

                })
      }

In ctrl

$scope.save = function(){
   return people.editPeople()
      .then(function(data){
         $scope.datas = data.data;
})
}

And display in html

ng-repeat ="data in datas"
{{data.name}}

edited Apr 21, 2017 at 0:37

answered Apr 21, 2017 at 0:21

Akashii

2,2815 gold badges19 silver badges32 bronze badges

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

8 Comments

John Over a year ago

this should be in app.factory or in my app.js?

Akashii Over a year ago

It you want use factory I will update it . And this code above is in controller . $scope.save is ng-click of button save of you

John Over a year ago

can you please update in factory, so I can see how this works.

John Over a year ago

apply to my app.factory above, if you can please

Akashii Over a year ago

No you can't update it with out server-side language like php or python

|

Collectives™ on Stack Overflow

Form not updating in AngularJS

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related