Question

我有一个表格，其中填充了从使用AngularJS捕获的服务中检索到的对象的记录。我在表格中有一个复选框，可以编辑该行。在行中，我有一个选择框，当我单击＆＃34;编辑＆＃34;时，我需要将其默认值设置为行中的原始值。行中的复选框，同时仍然使用要从中选择的所有其他值填充选择。

以下是填充表格和选择框的代码。

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

Answer 1

凭借我谦逊的经验，将默认值设置为与Angular中的ng-model相关联的输入的最佳方法是将默认值设置为ng-model。

ng-options在这里重新启动

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

因此，如果timeAllocation（因为它是在ng-model指令中编写的内容）设置为从服务加载数据时所需的默认值，它应该正确显示。

这个主题似乎已经得到了解答，这里有链接，还有一个傻瓜：

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

在编辑之前将选择值设置为值

1 个答案: