Come aggiornare i valori ng-repeat in angular js?

Sono nuovo di js angolare, ho un array che sto facendo il ciclo attraverso la direttiva ng-repeat, e ho scritto codice per copiare, rimuovere e modificare i valori nella matrice.Come aggiornare i valori ng-repeat in angular js?

Se voglio rimuovere o copiare posso farlo, fatto? Ma se clicco su modifica apparirà una finestra popup, voglio modificare i valori che quei valori aggiornati dovrebbero aggiornare nell'array.

Come posso fare?

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

qui è jsfiddle

fonte

2015-02-03 Dileep

Il modo più semplice è quello di utilizzare angular.copy per creare un clone dell'oggetto quando modifica viene cliccato e poi quando Save è fatto clic copiare i dati sull'elemento nell'array.

Prima initilize $scope.editedItem

$scope.editedItem = {};

Per editrow memorizziamo l'indice attualmente modificato nell'indice $ e clonare i dati in $scope.editedItem.

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

Poi save cloniamo nuovamente i dati nell'oggetto nell'array:

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

La vista deve essere aggiornato per utilizzare invece 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

fonte

2015-02-03 12:02:07

ha funzionato bene per me, C'è un altro modo possibile? O forse in Angular2? Grazie – M98

Innanzitutto, salvare il vecchio valore l ike questo:

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

Poi, quando si salva, basta trovare l'oggetto giusto, con l'aiuto del vecchio valore e assegnare nuovi valori in questo modo:

$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

fonte

2015-02-03 12:06:02

ho avuto questa stesso problema. qui era il mio fix

mio codice originale che non aggiorna l'oggetto

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

Usata gli elementi $ indice corretto legano

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

Questo legame crea un ri-disegnare il problema perché non sa se l'elemento aggiornato dell'array fa riferimento allo stesso oggetto che era in quel punto prima.Per risolvere questo ho dovuto apportare una leggera modifica alla formattazione della matrice.

['[email protected]','[email protected]']

diventa

[ 
    {'email': '[email protected]'}, 
    {'email': '[email protected]'} 
]

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

diventa

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

dopo questi cambiamenti si dovrebbe avere un vicolo cieco adeguata senza problemi ridisegnare in cui il campo di input perde concentrazione

fonte

2015-12-10 23:26:14

Questo ha funzionato per me !!!! Ma non avevo bisogno di passare la parte $ index nel modello-ng –

Prima dichiarare la variabile $scope.getIndex=0; e ottenere l'indice dalla matrice di elementi quando si fa clic sul pulsante Salva. Quindi assegnare $index a quella variabile.

Ora è possibile ottenere items[$scope.getIndex] ovunque nel controller. E vi aiuterà a aggiornare gli elementi di matrice:

$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

fonte

2017-04-20 12:35:58

Come aggiornare i valori ng-repeat in angular js?

risposta

Problemi correlati