angularjs：在tablecell onclick事件上显示下拉列表答案

【问题标题】：angularjs: show a dropdown list on tablecell onclick eventangularjs：在tablecell onclick事件上显示下拉列表
【发布时间】：2017-06-18 06:22:30
【问题描述】：

当我点击 angularjs 中的表格单元格时，我想用下拉列表替换表格单元格的值。 so if i click 7114 it should change to a dropdownlist containing all VDN numbers

HTML 表格：

<table class="table table-striped">
<tbody>
    <tr ng-repeat="(key, value) in responseData | groupBy: 'NameEn'">
        <td>{{key}}</td>
        <td>
            <table class="table table-bordered">
                <tr ng-repeat="responses in value">
                    <td>{{responses.vdnlanguage}}</td>
                    <td ng-click="editVDN()">
                        {{responses.vdnnum}}
                    </td>
                    <td>{{responses.vdnname}}</td>
                </tr>

            </table>
        </td>

    </tr>
</tbody>

AngularJs

 $scope.editVDN = function () {
        alert("populate dropdownlist");

    }

Dropdownlist 将使用来自 api 的响应来填充。如果有人可以提供帮助，我将非常感激。

【问题讨论】：

标签： javascript html angularjs dropdown

【解决方案1】：

将{{responses.vdnnum}} 更改为<div ng-bind-html="responses.vdnnum"></div>

responses.vdnnum 应该构造 html 字符串。

类似$scope.responses.vdnnum = '<select><option>First</option></select>';

代码最终应该和 ng-bind-html 一样：

$scope.editVdn = function () {
 $scope.responses.vdnnum = '<select><option>First</option></select>
};

【讨论】：

感谢@gauravmuk 的回复。我已经尝试过您的解决方案，但没有奏效。我收到两种类型的错误。 1. 尝试在安全上下文中使用不安全的值。 2. 无法在 ChildScope.$scope.editVDN 设置未定义的属性“vdnnum”。我们还缺少什么吗？
您还需要先注入 $sce。你这样做了吗？解决第二个问题，$scope.responses = $scope.responses || {};在设置 $scope.responses.vdnnum 之前
对于第一个问题，这样会更好stackoverflow.com/questions/41996899/…
好的，我已经解决了错误，但单元格没有更改为下拉列表。如果我没记错的话，ng-html-bind 会将单元格更改为选择标签。是吗？
我将 vdnnum 值设为“”，但点击时不会更改

【解决方案2】：

所以我找到了一个我认为可能对其他人有帮助的解决方案。以下是我为解决问题而编写的代码。

<td  ng-click="mode = 'edit'">
    <span ng-show="mode == edit">{{responses.vdnnum}}</span>
    <select ng-show="mode != edit" ng-options="option.vdnname for option in responseData track by option.id"
        ng-model="selectedOption" ng-change="selectedItemChanged(selectedOption)" class="form-control selcls" style="width:250px;">
        <option value="" disabled selected>--Select--</option>
    </select>
</td>

【讨论】：