ng-model沒有更新AngularJS中的正確用戶

Question

我是AngularJS中的一名新成員，並且我有一個表單，用戶可以在那裏編輯窗體。但是當用戶點擊更新時，它會更新表單。但是，用戶不會更新用戶。顯示的圖像 Image here

這裏是我的代碼：

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

<!-- the form --> 

<div class="list-view"> 

    <form> 
    <fieldset ng-disabled="inactive"> 

    <legend>Basic Info</legend> 

<b>First Name:</b> 
    <input type="text" ng-model="myObject.first"> 
    <br> 
    <b>Last Name:</b> 
    <input type="text" ng-model="myObject.last"> 

    <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive"> 
      Edit 
     </button> 

    <button type="submit" class="submit" ng-show="!inactive" ng-click="update()">Update</button> 




</form> 

App.js

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



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

$scope.people = {}; 

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

    }; 

    $scope.update = function(){ 
      $scope.people.first = $scope.myObject.first; 
      $scope.people.last = $scope.myObject.last; 

     localStorage.setItem('myObject', JSON.stringify($scope.myObject)); 



     }; 



     $scope.deletePeople = deletePeople; 
     function deletePeople(id){ 
     var userToDelete; 
      $scope.people.forEach(function(p, index){ 
      if(p.id == id){ 
       userToDelete = index; 
      } 
     }); 

     $scope.people.splice(userToDelete, 1); 
     console.log($scope.people); 
     } 



}); 

用戶

一覽必須people.first分別people.last

<div class="people" ng-repeat="p in people | filter:userSearch" > 

    <a href="#/people/{{ p.id }}"> 
    <img ng-src="{{p.img}}"/> 
    <span class="name">{{p.first}} </span> 
    <span class="name">{{p.last}} </span> 

    <p class="title">{{p.title}} </p> 
    <span class="date">{{p.date}} </span> 
    </a> 
</div> 

Answer 1

你的NG-模型的形式。例如。 <b>First Name:</b> <input type="text" ng-model="people.first"> <br> <b>Last Name:</b> <input type="text" ng-model="people.last">

Answer 2

人的觀點部分應包括在<div ng-controller="MyCtrl">股利。所以，只需移動該行，這是代碼的第一行。

Answer 3

檢查this

正如Swailem95說你要移動<div ng-controller="MyCtrl">頂部，它看起來後像下面。

<div ng-controller="MyCtrl"> 
    <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> 
    <!-- the form --> 
    <div class="list-view"> 
     <form> 
      <fieldset ng-disabled="inactive"> 
      <legend>Basic Info</legend> 
      <b>First Name:</b> 
      <input type="text" ng-model="myObject.first"> 
      <br> 
      <b>Last Name:</b> 
      <input type="text" ng-model="myObject.last"> 
      </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="update()">Update</button> 
     </form> 
    </div> 
</div>