Change in ng-model value getting changed in the other Parts of the list also

问题

I have a view which i am displaying to the user it is a Result list and i'm displaying it on the screen. From view user will be able to click on hyperlink that will allow him to modify that particular record. The problem i am facing is when the user modifies the value of a dropdown for particular employee its getting reflected in other employees record when clicking on their modify(The value in the response remains the same but while displaying ng-model is showing the old value).

This is my view 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>

This is how i populate the View

$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

This is my Response which i am populating on the screen

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

Now when the user clicks on modify hyperlink I will load another HTML with values prepoluated with the help of Modifyemp function .This is the function which will do that part .

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

This is the HTML which will be displayed to the user (Modify Screen)

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

Now When the user changes some value for a particular record (ABC) if he changes the dropdown from single to multiple . The same is being reflected to other records also when the modify screen of that customer is seen . The value in the scope response doesnt change . But the HTML in the modify page is wrongly displaying the values (changes made to ABC are shown here when the window is loaded). What can i do to fix this . what am i doing wrong

回答1:

You are able to see response for other customers because you are not setting the scope variables to null after setting them with changed data of one customer.

First of all, if the response data contains multiple values then you need to modify the 'searchresponse' array instead of single scope variables. I do not see how you are persisting the modified changes.

You need to run a for loop through 'searchresponse' find the record to be modified and update it and not through scope variables like you are doing it now. Try using this logic

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

来源：https://stackoverflow.com/questions/41472767/change-in-ng-model-value-getting-changed-in-the-other-parts-of-the-list-also

标签

javascript

html

angularjs

angularjs-scope