当我们更改特定记录的值时，ng-model 的值会发生变化

Question

我正在使用 ng-repeat 在前端使用 AngularJS 填充来自 REST API 的响应。我正在为用户提供修改屏幕上显示的每个结果的选项。当用户修改特定员工的值时（假设他正在更改下拉菜单），当单击该员工的修改记录链接时，其他员工的 HTML 也会反映出这一点。我应该怎么做才能使搜索响应中的详细信息显示在 HTML 中。这是我的搜索回复

var searchresponse = [{
"items": [{
    "employeeId": "ABC",
    "type": "D",
    "alive": "Yes"

}, {
    "employeeId": "DEF",
    "type": "D",
    "alive": "Yes"

}, {
    "employeeId": "NPK",
    "type": "D",
    "alive": "Yes"

}, {
    "employeeId": "PKN",
    "type": "D",
    "alive": "Yes"
}],
"more": false
}];

我将结果设置为搜索响应的控制器代码

$http.post('http://localhost:8080/services/employee/search/'+Systems+"", searchCriteria)
.then(function(response) {

    $scope.searchresponse= [];
    $scope.searchresponse = response.data.items;
}

这就是我将结果页面上的值显示为列表的方式。

<tr ng-repeat="details in searchresponse">
<td class=list align=center ng-switch="details.type">
<span
ng-switch-when="D">SINGLE</span><span
ng-switch-when="E">MULTIPLE</span>
</td>

假设我将员工 ABC 的值从 D 更改为 E。当我单击员工 PKN 的修改链接时，它正在加载选择为 E 的下拉列表。为什么我为特定员工所做的更改会反映给其他员工。

这是我用来加载 HTML 值的函数。在 HTML 中，我已将它们声明为 ng-model

$scope.ModifyEmployeeConfig = function(details ){
$scope.type= "" ;
$scope.type=  details.type; // I tried printing the value and see here the value in response only getting printed
}

这是我的 HTML

        <select name="type" class="pulldown1" id="type" ng-model="type">
        <option value="D">Single</option><option value="E">Multiple</option>
        </select>

Answer 1

如果我正确理解您的问题，您似乎正在更改类型变量，而不是下拉列表中的 details.type 变量。您想要做的是将下拉列表保留在 ng-repeat 中。这样你就根本不需要 ModifyEmployeeConfig 函数了。

如果需要，您只能在用户单击“修改”按钮时显示下拉菜单。

类似这样的：

<tr ng-repeat="details in searchresponse">
    <td class="list" align="center" ng-switch="details.type">
        <span ng-switch-when="D">SINGLE</span>
        <span ng-switch-when="E">MULTIPLE</span>

        <button ng-if="!details.modify" ng-init="details.modify = false" ng-click="details.modify = true">Modify</button>

        <select ng-if="details.modify" class="pulldown1" id="type" ng-model="details.type">
            <option value="D">Single</option>
            <option value="E">Multiple</option>
        </select>
    </td>
</tr>

重点是，您必须确保仅在要修改的详细信息对象上设置类型，而不是在全局类型变量上。