web-dev-qa-db-fra.com

Comment mettre à jour les valeurs ng-repeat dans js angulaire?

Je suis nouveau sur angular js, j'ai un tableau que je boucle en boucle à travers la directive ng-repeat et j'ai écrit du code pour copier, supprimer et modifier des valeurs dans le tableau.

Si je veux supprimer ou copier, je peux le faire, c'est fait? Mais si je clique sur éditer une boîte de dialogue apparaitra, je veux éditer les valeurs que ces valeurs mises à jour doivent mettre à jour dans le tableau.

Comment puis-je le faire?

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

voici jsfiddle

angularjsangularjs-directiveangularjs-ng-repeat
6
Dileep

Le moyen le plus simple consiste à utiliser angular.copy pour créer un clone de l'objet lorsque vous cliquez sur Modifier, puis lorsque vous cliquez sur Enregistrer, copiez les données dans l'élément du tableau.

Commencez par initialiser $scope.editedItem

$scope.editedItem = {};

Pour editrow, nous stockons l'index en cours d'édition dans $ index, puis clonons les données dans $scope.editedItem.

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

Ensuite, dans save, nous clonons les données dans l'objet du tableau:

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

La vue doit être mise à jour pour utiliser à la place 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
Wayne Ellery

J'ai eu le même problème. voici ma solution


Mon code original qui n'a pas mis à jour l'objet

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

Utilisation de items $ index pour le relier correctement

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

Cette liaison crée un problème de redessin, car elle ne sait pas si l'élément mis à jour dans le tableau fait référence au même élément que précédemment. Pour résoudre ce problème, j'ai dû apporter une légère modification au formatage du tableau.

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

devient

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

et

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

devient

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

après ces modifications, vous devriez avoir une liaison correcte sans problèmes de redessinage où le champ de saisie perd le focus.

3
Jimmy Miller

Commencez par déclarer la variable $scope.getIndex=0; et obtenez l'index du tableau d'éléments lorsque vous cliquez sur le bouton Enregistrer. Puis assignez $index à cette variable.

Maintenant, vous pouvez obtenir items[$scope.getIndex] n'importe où dans le contrôleur. Et vous aider à mettre à jour le tableau d’articles:

$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
S.Elavarasan

Tout d’abord, enregistrez l’ancienne valeur comme ceci:

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

Ensuite, lorsque vous enregistrez, trouvez le bon objet à l'aide de l'ancienne valeur et attribuez-lui de nouvelles valeurs, comme ceci:

$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
Jahongir Rahmonov