Question

当我点击angularjs中的tablecell时，我想用下拉列表替换表格单元格值。 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");

    }

将使用来自api的响应填充下拉列表。如果有人能提供帮助，我将非常感激。

Answer 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>
};

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

angularjs：显示tablecell onclick事件的下拉列表

2 个答案: