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

Question

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

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

这就是我填充 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 

这是我在屏幕上填充的响应

    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) 的某些值时，如果他将下拉列表从单个更改为多个。当看到该客户的修改屏幕时，同样的情况也会反射(reflect)到其他记录中。范围响应中的值不会改变。但修改页面中的 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
           }
        })
    })