我是angular js的新手，我有一个数组，正在通过ng-repeat指令对其进行循环，并且编写了用于复制，删除和编辑数组中值的代码。
如果我要删除或复制，我可以完成吗？
但是，如果我单击“编辑”，则会在其中出现一个弹出框，我要编辑这些更新后的值应在数组中更新的值。
我该怎么办？
<!doctype html>
<html>
<head>
<title>Angular app</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
.listv{
margin-bottom: 30px;
}
.editpopup{
width: 250px;
height: 250px;
border: 1px solid black;
display: none;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:gray;
}
.editpopup-true{
display: block;
}
.editpopup-false{
display: none;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCon">
<div ng-repeat="s in items" class="listv">
<span>{{s.id}}</span>
<span>{{s.pname}}</span>
<button ng-click="removeStudent($index)">remove</button>
<button ng-click="copyrow($index)">copy</button>
<button ng-click="editrow($index)">edit</button>
</div></br>
<div class="editpopup editpopup-{{istrue}} ">
<p>edit id:<input type="text" ng-model="editedid"></p>
<p>edit pname:<input type="text" ng-model="editedname"></p>
<button ng-click="save($index)">save</button>
<button ng-click="closepopup()">cancel</button>
</div>
</div>
var myApp=angular.module('myApp',[]);
myApp.controller('myCon',function($scope){
$scope.items=[{id:1,pname:'box1'},{id:2,pname:'box2'}, {id:3,pname:'box3'}];
$scope.removeStudent=function($index){
$scope.items.splice($index,1);
}
$scope.copyrow=function($index){
$scope.len=$scope.items.length;
$scope.ids=$scope.items[$index].id;
$scope.pnames=$scope.items[$index].pname
$scope.items.push({
id:$scope.len+1,
pname:$scope.pnames
});
}
$scope.editrow=function($index){
$scope.istrue=true;
$scope.editedid=$scope.items[$index].id;
$scope.editedname=$scope.items[$index].pname;
}
$scope.closepopup=function(){
$scope.istrue=false;
}
$scope.save=function($index){
$scope.istrue=false;
$scope.s.name=$scope.editedname;
}
});
这是jsfiddle
最佳答案
最简单的方法是在单击“edit”(编辑)时使用angular.copy创建对象的副本，然后在单击“Save”(保存)时将数据复制到数组中的项目。
首先初始化$scope.editedItem
$scope.editedItem = {};
对于
editrow，我们将当前编辑的索引存储在$ index中，然后将数据克隆到$scope.editedItem中。$scope.editrow = function($index){
$scope.istrue = true;
$scope.$index = $index;
angular.copy($scope.items[$index], $scope.editedItem);
}
然后在
save中，将数据克隆回到数组中的对象中:$scope.save = function(){
$scope.istrue = false;
angular.copy($scope.editedItem, $scope.items[$scope.$index])
}
需要更新 View 以改为使用
editedItem:<div class="editpopup editpopup-{{istrue}} ">
<p>edit id:<input type="text" ng-model="editedItem.id"></p>
<p>edit pname:<input type="text" ng-model="editedItem.pname"></p>
<button ng-click="save()">save</button>
<button ng-click="closepopup()">cancel</button>
</div>
JsFiddle
关于angularjs - 如何更新Angular js中的ng-repeat值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28297997/