Search code examples
angularjshtmlangularjs-ng-repeatangular-ngmodel

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

I am new to front end programming so hoping to get some guidance. I am developing an application using HTML AngularJs which uses ng-repeat and ng-model and populates multiple rows based on the data in the database for a user. Each row has static data coming from DB (returned as object via restAPI) and dynamic select option for user selection. Select option is hardcoded in app.js and linked to model on HTML for DB update upon selection using update button. Issue is when I select any value from list in one row, this is reflected in the select option on other row. Each row has its own button and i can see update function is working at row level.

Below is HTML and js files

<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>

Full HTML and JS file is here - https://jsfiddle.net/4jbtL0cj/

Solution

  • You are updating the same object which you have set as ng-model for each row (appCurrentStateSelected). This will update the same object and hence affect all rows as the same is set as ng-model for all rows. The ng-model should be an array or array of objects and then it should be set to array[$index], so that the ng-model is seperate for each row ($index is the index of ng-repeat). This is demonstrated in below plunker. You can do the same changes to your code.

    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>