0

I have a table that's populated with records from an object retrieved from a service captured using AngularJS. I have checkbox in the table that enables that row to be edited. Within the row, I have a select box that I need to have its default value set to the original value in the row when I click the "Edit" checkbox in the row while still populating the select with all the other values from which to choose.

Below is the code that's populating the table and the select box.

        <thead>
            <tr>
                <th class="col-lg-2">Sub Program</th>
                <th class="col-lg-6">Description</th>
                <th class="col-lg-2">Program</th>
                <th class="col-lg-1">Edit</th>
                <th class="col-lg-1">Update/Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="timeAllocationSubProgram in timeAllocationSubPrograms">
                <td ng-hide="checked">{{timeAllocationSubProgram.subProgramName}}</td>
                <td ng-hide="checked">{{timeAllocationSubProgram.subProgramDescription}}</td>
                <td ng-hide="checked">{{timeAllocationSubProgram.programName}}</td>
                <td ng-show="checked">
                    <input class="form-control" value="{{timeAllocationSubProgram.subProgramName}}"
                           ng-model="timeAllocationSubProgram.subProgramName" />
                </td>
                <td ng-show="checked">
                    <input class="form-control" value="{{timeAllocationSubProgram.subProgramDescription}}"
                           ng-model="timeAllocationSubProgram.subProgramDescription" />
                </td>
                <td ng-show="checked">
                    <select class="form-control" ng-options="timeAllocationProgram as timeAllocationProgram.programName
                            for timeAllocationProgram in timeAllocationPrograms track by timeAllocationProgram.programName" ng-model="timeAllocationProgram"
                            ng-change="selectProgram(timeAllocationProgram)"></select>
                </td>
                <td>
                    <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"/>
                </td>
                <td>
                    <button class="btn btn-xs btn-primary" ng-click="editTimeAllocationSubProgram(timeAllocationSubProgram)"
                            ng-show="checked">
                        Update
                    </button>
                    <button class="btn btn-xs btn-primary" ng-click="deleteTimeAllocationSubProgram(timeAllocationSubProgram)"
                            ng-hide="checked">
                        Delete
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
spice
  • 13
  • 1
  • 3

1 Answers1

0

With my humble experience, the best way to set default value to inputs linked to ng-model in Angular, is simply setting the default value to the ng-model.

ng-options is here remplacing 

<options ng-repeat="timeAllocationProgram in timeAllocationPrograms">

Consequently, if timeAllocation (as it's what is written in ng-model directive) is set to the default value you want when you load the data from the service, it should display it right.

The subject seems to have been already answered as well, here's the link, with a plunker :

how to use ng-option to set default value of select element

Community
  • 1
  • 1
Alburkerk
  • 1,564
  • 13
  • 19
  • First of all, thank you for responding. It's very much appreciated. I think it's close, but not quite what I'm needing (at least I don't think - I'm rather new to Angular). I'm looking to set the default value based on what was in that cell before I clicked the checkbox. It could be different based on which row I choose to Edit. The example you provided is good to set the default based on static code, but not dynamic (at least that I can interpret). – spice Nov 04 '16 at 02:25
  • Can you make a JsFiddle of your problem ? https://jsfiddle.net/ I'm kinda missing you javascript to help you there. – Alburkerk Nov 04 '16 at 15:59