Ändern in NG-Modell Wert in den anderen Teilen der Liste geändert auch

Question

Ich habe eine Sicht, die ich dem Benutzer anzeigen, es ist eine Ergebnisliste, und ich zeige es auf dem Bildschirm. Von der Ansicht aus kann der Benutzer auf einen Hyperlink klicken, mit dem er diesen bestimmten Datensatz ändern kann. Das Problem, dem ich gegenüberstehe, ist, wenn der Benutzer den Wert eines Drop-downs für einen bestimmten Mitarbeiter ändert, der sich in anderen Mitarbeitern widerspiegelt, wenn er auf seine Änderung klickt (Der Wert in der Antwort bleibt gleich, aber während das NG-Modell angezeigt wird, wird der alte Wert angezeigt)).

Das ist meine Ansicht HTML

<tr bgcolor="#cccccc" class=tabH1> 
<td align=center><b></b></td> 
<td align=center><b>Customer ID</b></td> 
<td align=center><b>Customer Type</b></td> 
<td align=center><b>Counter<br>Customer</b></td> 
<td align=center><b>Internet<br>Customer</b></td> 
</tr> 
<tr ng-repeat="details in searchresponse"> 
<td class=list align=center>{{details.customerId}}</td> 
<td class=list align=center ng-switch="details.type"> 
<span ng-switch-when="C">Tester</span> 
<span ng-switch-when="I">Developer</span> 
</td> 
<td class=list align=center ng-switch="details.esccntrypartyperstmnt"> 
<span ng-switch-when="0">SINGLE</span> 
<span ng-switch-when="1">MULTIPLE</span> 
</td> 
<td class=list align=center ng-switch="details.escexposureperstmnt"><span 
ng-switch-when="0">SINGLE</span><span ng-switch-when="1">MULTIPLE</span> 
</td> 
<a href 
style="cursor: pointer" data-toggle="modal" 
data-target="#editWindow" ng-click="ModifyEmpConfig(details)">Modify</a> 

Dies ist, wie ich die Ansicht bevölkern

$http.post('http://localhost:8080/aeservices/eurex/search/'+Systems+"", searchCriteria) 
.then(function(response) { 

    $scope.searchresponse= []; 
    $scope.searchresponse = response.data.items; 
} // - From here i am populating the above Html 

Dies ist meine Antwort, die ich auf dem Bildschirm

var searchresponse = [{ 
"items": [{ 
"customerId": "ABC", 
"type": "D", 
"esccntrypartyperstmnt": 0, 
"escexposureperstmnt": 1 
}, { 
"customerId": "DEF", 
"type": "D", 
"esccntrypartyperstmnt": 1, 
"escexposureperstmnt": 0 
}, { 
"customerId": "NPK", 
"type": "D", 
"esccntrypartyperstmnt": 0, 
"escexposureperstmnt": 1 
}, { 
"customerId": "PKN", 
"type": "D", 
"esccntrypartyperstmnt": 1, 
"escexposureperstmnt": 0 
}], 
"more": false 
}]; 

Jetzt bin bevölkern, wenn Der Benutzer klickt auf den Hyperlink Ändern. Ich lade einen anderen HTML-Code mit Werten, die mit Modifyemp f vorpoliert wurden Diese Funktion wird diesen Teil übernehmen.

$scope.ModifyEmpConfig = function(details){ 
$scope.empcustomerid = details.customerId; 
$scope.emptype = details.type; 
$scope.empcntrypartyperstmnt = details.esccntrypartyperstmnt 
$scope.empexposureperstmnt = details.escexposureperstmnt 
} 

Dies ist die HTML, die dem Benutzer angezeigt werden (Ändern Bildschirm)

<td class="bg-panel" align="left" style="width:16.666%"><ng-form name="idForm"> 
     <input name="customerid" id="customerid" type="text" size="6" maxlength="6" class="tType1" value="" ng-model="empcustomerid" ng-disabled="true" no-special-char></ng-form></td>   
<td><span style="padding-left:1px"> 
<td class="bg-panel" align="left" style="width:16.666%"><ng-form name="idForm"> 
<input name="customerid" id="customerid" type="text" size="6" maxlength="6" class="tType1" value="" ng-model="emptype" ng-disabled="true" no-special-char></ng-form></td>   
<td><span style="padding-left:1px"> 
<td class="bg-panel" align="right" style="width:16.666%">Counter Party:</td> 
<td><span style="padding-left:1px"></td> 
<td class="bg-panel" style="width:16.666%"> 
<select name="cntrypartyperstmnt" class="pulldown1" id="cntrypartyperstmnt" ng-model="empcntrypartyperstmnt" > 
<option value="0">Single</option><option value="1">Multiple</option></select> 
     <td><span style="padding-left:1px"></td></td></td> 
     <td class="bg-panel" align="right" style="width:16.666%">InternetParty:</td> 
<td><span style="padding-left:1px"></td> 
<td class="bg-panel" align="left" style="width:16.666%"> 
<select name="exposureperstmnt" class="pulldown1" id="exposureperstmnt" ng-model="empexposureperstmnt"> 
<option value="0">Single</option><option value="1">Multiple</option> 
</select><td><span style="padding-left:1px"> </td></td> 

Jetzt Wenn der Benutzer einen Wert für einen bestimmten Datensatz ändert (ABC), wenn er das Drop-down aus einzelnen ändert zu mehreren. Das gleiche gilt für andere Datensätze, auch wenn der Bildschirm zum Ändern dieses Kunden angezeigt wird. Der Wert in der Bereichsantwort ändert sich nicht. Der HTML-Code auf der Änderungsseite zeigt jedoch fälschlicherweise die Werte an (Änderungen an ABC werden hier angezeigt, wenn das Fenster geladen wird). Was kann ich tun, um das zu beheben? Was mache ich falsch?

Answer 1

Sie können die Antwort für andere Kunden anzeigen, weil Sie die Bereichsvariablen nicht auf Null setzen, nachdem Sie sie mit geänderten Daten eines Kunden festgelegt haben.

Wenn die Antwortdaten mehrere Werte enthalten, müssen Sie zuerst das Array 'searchresponse' anstelle von einzelnen Bereichsvariablen ändern. Ich sehe nicht, wie Sie die modifizierten Änderungen beibehalten.

Sie müssen eine for-Schleife durch 'searchresponse' ausführen, um den Datensatz zu finden, der geändert werden soll, und ihn aktualisieren und nicht über Scope-Variablen, so wie Sie es jetzt tun. Versuchen Sie es mit dieser Logik

angular.forEach(searchresponse , function (item) { 
     angular.forEach(item.items, function (element) { 
      if(element.customerId==details.customerId){ 
       element.emptype=details.emptype; 
      //all the data that is changed.. update here 
      } 
     }) 
    })