Question

我正在创建一个表单，当用户单击编辑按钮编辑文本时，它可以正常工作。但是，当用户单击更新按钮然后重新加载页面时，它不会在重新加载页面后显示更新的文本。这是plunker，它工作但下面的代码在页面重新加载时不起作用。（我想只用Front-End做这个）

http://plnkr.co/edit/yyDf2SuEvefLWIK13kS4?p=preview

这是我的代码。

    <div class="people-view">
  <h2 class="name">{{people.first}}</h2>
    <h2 class="name">{{people.last}}</h2>

  <span class="title">{{people.title}}</span>

  <span class="date">{{people.date}} </span>

</div> 




<div ng-controller="MyCtrl">
<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>

</div>
</div>

App.js

    var app = angular.module("Portal", []);



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

   $scope.msg = 'Data sent: '+ JSON.stringify($scope.people);

  };

});

JSON文件

    [
  {
    "id": "0",
    "first": "John",
    "last": "Smith",
    "img": "//placehold.it/100x100",
    "title": "Family",
    "date": "Joined 4/2/17",
    "email": "jsmith@email.com",
    "phone": "555-555-5555",
    "website": "www.google.com",
    "education": "NYU Law",
    "year": "2008",
    "street": "123 Main Street",
    "city": "Los Angeles",
    "state": "CA",
    "zip": "1234567"


  },
]

控制器

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


  });
}]);

Answer 1

您可以尝试使用prevent default handler：

ng-click="save($event)"

在您的控制器中，您可以输入：

$scope.save = function (event) {
  event.preventDefault();
  $scope.msg = 'Data sent: '+ JSON.stringify($scope.people);
}

Answer 2

要使您的更改永久化，您必须将其存储到某种存储中。文件还可以，但它不是最好的选择。所以你可以考虑使用本地存储。这是如何处理的好教程 local-storage。所以控制器就像

app.controller('myCtrl', ['$scope', function($scope){

    $scope.people = {
        "first": "John", 
        "last": "Smith"
    }

    $scope.myObject = JSON.parse(localStorage.getItem('myObject')) || {
        first : $scope.people.first,
        last : $scope.people.last
    }; 

    $scope.updateThingy = function(){
        $scope.people.first = $scope.myObject.first;
        $scope.people.last = $scope.myObject.last;
        localStorage.setItem('myObject', JSON.stringify($scope.myObject));
    };
}]);

这是plunker。祝你好运

重新加载表单不会在AngularJS中更新？

2 个答案: