angularJS单向数据绑定和模型编辑
在我的应用程序中，我使用模式表单来编辑表视图数据。我有一个问题，在第一步，我没有使用其他变量和.copy() --所以当我在表中编辑数据时，直到单击save (所以现在是引用)，我才看到任何编辑。现在我需要做我以前描述过的.
我看到angularJS 1.3添加了一个特性:单向数据绑定。
我可以在我的应用程序中使用它吗？
我写了个笔头：
http://plnkr.co/edit/4gAWiK5gVg58jWtwYovK?p=preview
和代码：
<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>和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;
};
}])如果有什么不清楚的地方，请写在评论中。谢谢。
还有一次，很短的时间:不要在ng-重复更新模型，直到单击“保存”按钮。
回答 1
Stack Overflow用户
发布于 2015-02-17 20:25:03
不确定你是否已经找到了解决问题的方法。
按照注释中的建议，您需要复制模型对象，并在保存时可以将新数据重新应用到模型中。
这是我通过以下更改找到的解决方案：
$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);
};简短解释：，我在edit_article中存储对文章的引用，因为angular.copy正在从拷贝中删除$$hashKey，而角不能用-out哈希来定位数组中的位置。单击保存后，更新函数将保存的文章更改为新输入的数据。
我找到了一个有用的博客帖子，我从其中获取了更新函数。
您可以找到更新的柱塞这里。
https://stackoverflow.com/questions/28563159
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号