Angularjs 如何在angular js中更新ng repeat值？_Angularjs_Angularjs Directive_Angularjs Ng Repeat

Angularjs 如何在angular js中更新ng repeat值？

angularjs

Angularjs 如何在angular js中更新ng repeat值？,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,我是angular js的新手，我有一个数组，我正在通过ng repeat指令循环它，我已经编写了用于复制、删除和编辑数组中的值的代码如果我想删除或复制，我可以这样做，完成了吗？但是如果我点击编辑，一个弹出框将出现在那里，我想编辑那些更新后的值在数组中应该更新的值我怎样才能完成它 <!doctype html> <html> <head> <title>Angular app</title> <script src="

我是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>

以下是

最简单的方法是在单击“编辑”时创建对象的克隆，然后在单击“保存”时将数据复制到数组中的项

首先初始化

$scope.editItem

$scope.editedItem = {};

对于

editrow

我们将当前编辑的索引存储在$index中，然后将数据克隆到

$scope.editeem

中

$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]) 
}

需要更新视图，以改为使用

editem

：

<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>


编辑id:
编辑pname：
拯救
取消

首先，按如下方式保存旧值：

$scope.editrow=function($index){
    $scope.istrue=true;
    $scope.oldValue = $scope.items[$index].id; // save the old id
    $scope.editedid=$scope.items[$index].id;
    $scope.editedname=$scope.items[$index].pname;
};

$scope.save=function($index){
    $scope.istrue=false;
    $scope.items.forEach(function (item) {
       if(item.id == $scope.oldValue){
           item.id = $scope.editedid;
           item.pname = $scope.editedname;
       }
    });
};

然后，保存时，只需在旧值的帮助下找到正确的对象，并按如下方式分配新值：

$scope.editrow=function($index){
    $scope.istrue=true;
    $scope.oldValue = $scope.items[$index].id; // save the old id
    $scope.editedid=$scope.items[$index].id;
    $scope.editedname=$scope.items[$index].pname;
};

$scope.save=function($index){
    $scope.istrue=false;
    $scope.items.forEach(function (item) {
       if(item.id == $scope.oldValue){
           item.id = $scope.editedid;
           item.pname = $scope.editedname;
       }
    });
};

我也有同样的问题。这是我的办法

我的原始代码没有更新对象

<div class="info" ng-repeat="email in vm.contactData.emails.other">
      <input type="text" ng-model="email" />
</div>

变成

[
   {'email': 'email1@google.com'},
   {'email': 'email2@google.com'}
]

<div class="info" ng-repeat="email in vm.contactData.emails.other">
      <input type="text" ng-model="vm.contactData.emails.other[$index].email" />
</div>

及

变成

[
   {'email': 'email1@google.com'},
   {'email': 'email2@google.com'}
]

<div class="info" ng-repeat="email in vm.contactData.emails.other">
      <input type="text" ng-model="vm.contactData.emails.other[$index].email" />
</div>

在这些更改之后，您应该有一个正确的绑定，而不会出现输入字段失去焦点的任何重新绘制问题。

首先声明变量

$scope.getIndex=0并在单击“保存”按钮时从items数组中获取索引。然后将$index
分配给该变量
现在，您可以在控制器中的任何位置获取项[$scope.getIndex]
。并帮助您更新项目数组：
$scope.getIndex=0;
$scope.editrow=function($index){
     $scope.getIndex=$index;
     $scope.istrue=true;
     $scope.editedid=$scope.items[$index].id;
     $scope.editedname=$scope.items[$index].pname;
}

$scope.save=function($index){
    $scope.istrue=false;
    $scope.items[$scope.getIndex].id=$scope.editedid;
    $scope.items[$scope.getIndex].pname=$scope.editedname;
}[enter link description here][1]



这对我很有效，还有其他可能的方法吗？或者在安格拉尔？非常感谢。