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
}];
现在，当用户单击修改"超链接时，我将在Modifyemp函数的帮助下加载另一个具有预先设定的值的HTML.这是该函数的一部分.
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>
Now如果用户将下拉列表从Single更改为Multiple，则为特定记录(ABC)更改某些值.当看到该客户的修改屏幕时，相同的内容也会反映到其他记录中.范围响应中的值不变.但是修改页面中的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屋！
