ng-model 值的变化也在列表的其他部分发生变化 [英] Change in ng-model value getting changed in the other Parts of the list also
问题描述
我有一个视图，我向用户显示它是一个结果列表，我将它显示在屏幕上.从视图中，用户将能够单击允许他修改该特定记录的超链接.我面临的问题是，当用户修改特定员工的下拉列表的值时，当点击他们的修改时，它会反映在其他员工的记录中(响应中的值保持不变，但显示 ng-model 时显示的是旧值).
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).
这是我的 HTML 视图
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
}];
现在，当用户点击修改超链接时，我将加载另一个 HTML，其中的值在 Modifyemp 函数的帮助下进行了预填充.这就是完成该部分的函数.
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
}
这是将显示给用户的 HTML(修改屏幕)
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>
现在当用户更改特定记录 (ABC) 的某些值时，如果他将下拉列表从 single 更改为 multiple .当看到该客户的修改屏幕时，同样的情况也会反映到其他记录中.范围响应中的值不会改变.但是修改页面中的 HTML 错误地显示了值(加载窗口时，对 ABC 所做的更改显示在此处).我能做些什么来解决这个问题.我做错了什么
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
推荐答案
您能够看到其他客户的响应，因为在使用一位客户的更改数据设置范围变量后，您没有将其设置为 null.
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.
首先，如果响应数据包含多个值，那么您需要修改searchresponse"数组而不是单作用域变量.我不明白您是如何坚持修改后的更改的.
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.
您需要通过 'searchresponse' 运行 for 循环，找到要修改的记录并更新它，而不是像您现在所做的那样通过范围变量.尝试使用这个逻辑
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
}
})
})
这篇关于ng-model 值的变化也在列表的其他部分发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
