angularJS one way data binding and model edit with ng-repeat
Question
In my app i use modal form to edit table view data. And i have one trouble, on first steps i didn't use some other variable and .copy() - so that when i edit my data - in table i didn't see any edit's until i click on save (so now it's reference). Now i need to do what i have describen before...
And i see that angularJS 1.3 add one feature as: one way data binding.
Could i somehow use it in my app?
i have written a plunker:
http://plnkr.co/edit/4gAWiK5gVg58jWtwYovK?p=preview
and code:
<html ng-app="myapp">
<head>
<script data-require="angular.js@1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ArticleCtrl">
<h1>Hello Plunker!</h1>
<ol >
<li ng-repeat="item in articles">
<h4>{{item.name}}</h4>
<h2>{{::item.age}}</h2> <!--(like this i wanna to use with angularJS 1.3)-->
<a ng-click="editArticle(item)"> - Edit - </a>
</li>
</ol>
Edit your title: <input type="text" ng-model="article.name"/>
Edit your age: <input type="text" ng-model="article.age"/>
<p>And save:</p>
<button type="submit">Save</button>
</body>
</html>
and js:
var app = angular
.module('myapp', []);
angular.module('myapp')
.controller('ArticleCtrl', ['$scope', function($scope) {
$scope.articles = [{name: '123', age: 10}, {name: '456', age: 20}, {name: '789', age: 30}];
$scope.article = {name: '', age: ''};
$scope.editArticle = function(article){
$scope.article = article;
};
}])
if something is not clear, please write it in comments. Thank you.
Also one more time and shortly: do not update model in ng-repeat until button "save" is clicked.
1 answers
solution1
1 2015-02-17 20:25:03
Not sure if you've already found a way to solve your problem.
As proposed in the comments you need to copy the model object and at saving you can re-apply the new data to the model.
This is the solution I found with the following changes:
$scope.editArticle = function(article){
edit_article = article; // edit_article stores a reference to the article to edit
angular.copy(article, $scope.article); // copy article to form fields --> ref. by $scope.article
};
$scope.saveArticle = function(){
update(edit_article, $scope.article); // dest. is stored reference to element in list
// source is the new input
//console.log('edited value', $scope.article);
};
Short explanation: I'm storing a reference to the article in edit_article , because angular.copy is removing the $$hashKey from the copy and angular can't locate the position in the array with-out the hash. Once save is clicked the update function will change the saved article to the newly entered data.
I have found a useful blog post where I took the update function from.
You can find the updated plunkr here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.