Angularjs 下拉列表中一行的更改反映了所有行
我是新的前端编程，所以希望得到一些指导。我正在使用HTML AngularJs开发一个应用程序，它使用ng repeat和ng模型，并根据数据库中的数据为用户填充多行。每行都有来自数据库的静态数据（通过restAPI作为对象返回）和用于用户选择的动态选择选项。选择选项在app.js中硬编码，并在使用更新按钮进行选择时链接到HTML上的模型以进行DB更新。问题是当我从一行的列表中选择任何值时，这会反映在另一行的选择选项中。每行都有自己的按钮，我可以看到更新功能在行级别工作 下面是HTML和js文件Angularjs 下拉列表中一行的更改反映了所有行,angularjs,html,angularjs-ng-repeat,angular-ngmodel,Angularjs,Html,Angularjs Ng Repeat,Angular Ngmodel,我是新的前端编程，所以希望得到一些指导。我正在使用HTML AngularJs开发一个应用程序，它使用ng repeat和ng模型，并根据数据库中的数据为用户填充多行。每行都有来自数据库的静态数据（通过restAPI作为对象返回）和用于用户选择的动态选择选项。选择选项在app.js中硬编码，并在使用更新按钮进行选择时链接到HTML上的模型以进行DB更新。问题是当我从一行的列表中选择任何值时，这会反映在另一行的选择选项中。每行都有自己的按钮，我可以看到更新功能在行级别工作 下面是HTML和js文件
<body>
<h1 align="center">User Tracker</h1>
<div ng-controller="MainController as main">
<div>
<p>Please Enter ID </p>
<p>
<input type="text" ng-model="main.model.userName"></input>
<button ng-click="main.model.getOrgList()">List Org List</button>
</p>
</div>
<hr ng-show="main.model.formSubmitted"></hr>
<div>
<table class="table table-bordered" border="1" ng-show="main.model.formSubmitted">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="org in main.model.orgList" id="{{org.id}}">
<td>{{org.id}}</td>
<td align="center">{{org.user}}</td>
<td align="center">
<select ng-model="main.model.selectedRecord.appCurrentStateSelected ">
<option ng-repeat=" option in main.model.appCurrentStateList " value ="{{option.value}}" id="{{option.id}}"> {{option.name}} </option>
</select>
</td>
<td>
<button ng-click="main.model.updateAppDetailsList({id:org.id,userName:org.name,appCrntState:main.model.selectedRecord.appCurrentStateSelected})">Update</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
用户跟踪器
请输入ID
列表组织列表
身份证件
用户名
行动
{{org.id}
{{org.user}
{{option.name}
更新
完整的HTML和JS文件在这里-您正在更新已为每行设置为ng模型的同一对象（appCurrentStateSelected）。这将更新同一对象，并因此影响所有行，因为所有行都将同一对象设置为ng模型。ng模型应该是一个数组或对象数组，然后应该设置为数组[$index]，这样ng模型对于每一行都是独立的（$index是ng repeat的索引）。下面的plunker演示了这一点。您可以对代码进行相同的更改
{{d.name}
<td><select ng-model="selected[$index]" ><option ng-repeat="d in dropd" value="{{d.value}}" id="{{d.id}}">{{d.name}}</option></select></td>