下拉列表中一行的变化反映所有行

Question

我是前端编程的新手，希望得到一些指导。我正在使用 HTML AngularJs 开发一个应用程序，它使用 ng-repeat 和 ng-model 并根据数据库中的数据为用户填充多行。每行都有来自数据库的静态数据（通过 restAPI 作为对象返回）和用户 selection 的动态 select 选项。 Select 选项在 app.js 中被硬编码并链接到 HTML 上的模型，以便使用更新按钮在 selection 上更新数据库。问题是当我 select 一行中列表中的任何值时，这反映在另一行的 select 选项中。每行都有自己的按钮，我可以看到更新功能在行级别工作。

下面是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>

完整 HTML 和 JS 文件在这里 - https://jsfiddle.net/4jbtL0cj/

Answer 1

您正在更新为每一行 (appCurrentStateSelected) 设置为 ng-model 的同一个对象。这将更新同一个对象，因此影响所有行，因为所有行都设置为 ng-model。 ng-model 应该是一个数组或对象数组，然后它应该被设置为 array[$index]，这样 ng-model 对于每一行都是独立的（$index 是 ng-repeat 的索引）。这在下面的plunker中得到了证明。您可以对代码进行相同的更改。

http://plnkr.co/edit/FdWJyzNfbISa9NKFsCqt?p=preview

 <td><select ng-model="selected[$index]" ><option ng-repeat="d in dropd" value="{{d.value}}" id="{{d.id}}">{{d.name}}</option></select></td>

下拉列表中一行的变化反映所有行

Change in one row of drop-down list reflects all rows

html

angularjs

angularjs-ng-repeat

angular-ngmodel