我正在使用 AngularJS 编辑/保存数据。下面是我想要实现的目标的非常基本的代码示例。
<强> JS BIN URL
在我使用下面的代码“重复器”选择器之前，编辑和保存数据功能工作正常。
ng-repeat="var in [1,2,3]"
如果您发现在“ng-repeat”情况下，所有文本区域元素的行为都不相同。如何在单击“编辑/保存”按钮时定位选定的文本区域。
ANGULARJS 代码
var app = angular.module('myapp', []);
app.controller('myctrl', ['$scope', function ($scope) {
$scope.editEnabled= false;
$scope.dummydata= "This is dummy data";
$scope.editData=function(){
$scope.editEnabled = true;
$scope.inputText = $scope.dummydata;
};
$scope.saveData=function(){
$scope.editEnabled = false;
$scope.dummydata = $scope.inputText;
};
$scope.disableEdit= function(){
$scope.editEnabled = false;
};
}]);
预先感谢您的帮助。
最佳答案
按照这些思路应该可以工作。 Controller 中的数据应该反射(reflect)您想要在 View 中显示的内容。
http://jsbin.com/beyunuze/7/edit
<body ng-controller="myctrl">
<div class="repeater" ng-repeat="item in items ">
<div class="btnCont">
<span ng-hide="item.editEnabled">
<button ng-click="editData(item)">Edit</button>
</span>
<span ng-show="item.editEnabled">
<button ng-click="saveData(item)">Save</button>
</span>
</div>
<div class="textArea">
<div ng-hide="item.editEnabled" class="content">
{{item.dummyData}}
</div>
<div ng-show="item.editEnabled">
<textarea ng-model="item.dummyData" class="content contentInput" /></textarea>
</div>
</div>
</div>
</body>
js:
var app = angular.module('myapp', []);
app.controller('myctrl', ['$scope', function ($scope) {
$scope.items=[{dummyData:"foo"},{dummyData:"bar"},{dummyData:"baz"}];
$scope.editEnabled= false;
$scope.dummydata= "This is dummy data";
$scope.editData=function(item){
item.editEnabled = true;
};
$scope.saveData=function(item){
item.editEnabled = false;
};
$scope.disableEdit= function(){
$scope.editEnabled = false;
};
}]);
关于javascript - 在 ng-repeat 模式下编辑和保存数据 - AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23785321/