在AngularJS中不更新的表格

當用戶單擊編輯按鈕時，我在表單中有一個編輯按鈕，並編輯表單並單擊保存。它得到更新。但是當用戶重新加載頁面時，它不會更新頁面。所以，下面是我的代碼。我想要的只是當用戶編輯表單中的文本時，即使他們重新加載頁面，文本也會更新。（比如，如果可能，我希望JSON文件也可以獲取該請求）。提前致謝。在AngularJS中不更新的表格

<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": "[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>

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

    }) 

    }

來源

2017-04-20 John

如果你的'$你scope.people.name'？ push是'array'的方法。我認爲你的$ scope.people是對象 – Akashii

，是的它是一個對象。但是，你能告訴我如何將save（）或update（）方法應用於我的代碼。 – John

你能提供完整的代碼嗎？ – Akashii

這裏是例如用於更新。你可以使用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}}

來源

2017-04-21 00:21:01 Akashii

這應該是在app.factory或我的app.js？ – John

它你想使用工廠我會更新它。上面的代碼在控制器中。 '$範圍。保存'是ng-click你保存的按鈕 – Akashii

你可以請在工廠更新，所以我可以看到它是如何工作的。 – John

在AngularJS中不更新的表格

回答

相關問題