Question

我在表单中有一个编辑按钮，当用户点击编辑按钮，然后编辑表单并点击保存。它得到更新。但是当用户重新加载页面时，它不会更新页面。所以，这是我的代码如下。我想要的只是当用户编辑表单中的文本时，即使重新加载页面，文本也会更新。（比如，如果可能的话，我希望JSON文件也能获得该请求）。提前致谢。

    <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);
}

控制器

        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文件

    [
  {
    "id": "0",
    "first": "John",
    "last": "Doe",
     "title": "Family",
    "date": "Joined 4/2/17",
    "email": "jdoe@email.com",
    "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>

抓住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' }

    })

  }

Answer 1

以下是更新示例。你可以使用ajax。例如，我在服务器端使用php

    .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' }

                })
      }

在ctrl中

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

并以html显示

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

表格未在AngularJS中更新

1 个答案: