All geek questions in one place

How to update ng-repeat values ​​in angular js?

I am new to angular js, I have an array that I iterate through the ng-repeat directive, and I wrote code to copy, delete, and edit the values ​​in the array.

If I want to delete or copy, can I do it, done? But if I click on the edit, one popup will appear. I want to edit the values ​​that the updated values ​​should be updated in the array.

How can i do this?

 <!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; } });

here jsfiddle

+6
source share
4 answers

The easiest way is to use angular.copy to create a clone of the object when you click on edit, and then when a copy of the data in the element in the array is clicked.

Initialize $scope.editedItem

 $scope.editedItem = {};

For editrow we save the current edited index into $ index and then clone the data into $scope.editedItem .

 $scope.editrow = function($index){ $scope.istrue = true; $scope.$index = $index; angular.copy($scope.items[$index], $scope.editedItem); }

Then in save we clone the data back into the object in the array:

 $scope.save = function(){ $scope.istrue = false; angular.copy($scope.editedItem, $scope.items[$scope.$index]) }

The view needs to be updated to use 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

+14
source

I had the same problem. here was my fix


My source code that did not update the object

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

Uses the $ index element for proper binding

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

This binding creates a repeat draw problem because it does not know if the updated element in the array refers to the same element that was in this place before. To fix this, I had to make a small change to the formatting of the array.

 [' email1@google.com ',' email2@google.com ']

becomes

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

and

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

becomes

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

after these changes, you should have the correct binding without any problems with re-drawing when the input field loses focus.

+3
source

First save the old value as follows:

 $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; };

Then, when you save, simply find the desired object using the old value and assign the new values ​​as follows:

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

Jsfiddle

0
source

First declare the variable $scope.getIndex=0; and get the index from the array of elements when you click the save button. Then assign $index this variable.

Now you can get items[$scope.getIndex] anywhere in the controller. And help you update the array of elements:

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


Jsfiddle

0
source

Source: https://habr.com/ru/post/981920/

More articles:


All Articles