ng-model 值的变化在列表的其他部分也发生变化

Question

我有一个视图，我正在向用户显示它是一个结果列表，我正在屏幕上显示它。从视图用户将能够单击允许他修改该特定记录的超链接。我面临的问题是当用户修改特定员工的下拉列表的值时，它会在单击他们的修改时反映在其他员工记录中（响应中的值保持不变，但在显示 ng-model 时显示旧值)。

这是我的视图 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>

这就是我填充视图的方式

$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 

这是我在屏幕上填写的回复

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

现在，当用户单击修改超链接时，我将加载另一个 HTML，其值在 Modifyemp 函数的帮助下预先填充。这是完成该部分的函数。

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

这是将显示给用户的 HTML（修改屏幕）

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

现在当用户更改特定记录 (ABC) 的某些值时，如果他将下拉列表从 single 更改为 multiple 。当看到该客户的修改屏幕时，同样会反映到其他记录中。范围响应中的值不会改变。但是修改页面中的 HTML 错误地显示了值（加载窗口时对 ABC 所做的更改显示在此处）。我能做些什么来解决这个问题。我做错了什么

Answer 1

您可以看到其他客户的响应，因为在使用一位客户的更改数据设置范围变量后，您没有将范围变量设置为 null。

首先，如果响应数据包含多个值，那么您需要修改“searchresponse”数组而不是单个范围变量。我看不到您如何保留修改后的更改。

您需要通过“searchresponse”运行 for 循环来查找要修改的记录并更新它，而不是像现在这样通过范围变量。试试这个逻辑

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