Jak zaktualizować wartości powtarzania ng w kątowym js?

Jestem nowy dla kątowego js, mam tablicę Pętlę go przez dyrektywę ng-repeat i napisałem kod do kopiowania, usuwania i edycji wartości w tablicy.Jak zaktualizować wartości powtarzania ng w kątowym js?

Jeśli chcę usunąć lub skopiować, mogę to zrobić, zrobić? Ale jeśli kliknę przycisk Edytuj, pojawi się tam okienko popup Chcę edytować wartości, które zaktualizowane wartości powinny zostać zaktualizowane w tablicy.

Jak mogę to zrobić?

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

tutaj jest jsfiddle

Źródło

2015-02-03 Dileep

Najprostszym sposobem jest użycie angular.copy stworzyć klona obiektu podczas edycji jest kliknął i wtedy kiedy Zapisz się kliknięte skopiowanie danych do elementu w tablicy.

Pierwszy initilize $scope.editedItem

$scope.editedItem = {};

Dla editrow przechowujemy aktualnie edytowanego indeksu w $ index a następnie sklonować dane do $scope.editedItem.

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

Następnie w save my sklonować dane z powrotem do obiektu w tablicy:

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

Widok musi być zaktualizowana zamiast używać 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

Źródło

2015-02-03 12:02:07

To działa dobrze dla mnie, Czy istnieje inny możliwy sposób? A może w Angular2? Dziękuję – M98

Najpierw zapisz starą wartość l IKE to:

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

Następnie po zapisaniu tylko znaleźć odpowiedni obiekt z pomocą starych wartości i przypisać nowe wartości tak:

$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

Źródło

2015-02-03 12:06:02

miałem ten ten sam problem. tutaj był mój dylemat

Mój oryginalny kod, który nie aktualizuje obiekt

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

wykorzystał przedmioty $ index prawidłowo powiązać go

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

Wiązanie tworzy Ponownie rysuj problem, ponieważ nie wie, czy zaktualizowany element w tablicy odwołuje się do tego samego elementu, który był w tym miejscu wcześniej.Aby to naprawić, musiałem wprowadzić niewielką zmianę w formatowaniu tablicy.

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

staje

[ 
    {'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>

staje

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

po tych zmianach należy mieć odpowiednią wiążą się bez żadnych problemów re-draw, gdzie pole wejściowe traci ostrość.

Źródło

2015-12-10 23:26:14

To zadziałało dla mnie !!!! Ale nie musiałem przekazywać części $ index w modelu ng –

Najpierw zadeklaruj zmienną $scope.getIndex=0; i pobierz indeks z tablicy elementów po kliknięciu przycisku zapisu. Następnie przypisz $index do tej zmiennej.

Teraz możesz uzyskać items[$scope.getIndex] w dowolnym miejscu kontrolera. I pomóc zaktualizować elementów tablicy:

$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

Źródło

2017-04-20 12:35:58

Jak zaktualizować wartości powtarzania ng w kątowym js?

Odpowiedz

Powiązane problemy