Question

在我的代码中，我有一个由ng-repeat标记填充的表格，并且没问题。通过单击按钮，innerHTML会向该表添加一行。这个新行应包含2个单元格：

select
input-field +确认button

我想使用select标记填充ng-option，这不会发生。使用innerHTML嫁接的angularJS标记（以及我尝试插入的任何脚本或函数）都不起作用。

methods是一个包含3种付款方式的JSON（PayPal，Postepay，Skrill）。

payment_methods包含用户付款方式（方法+备注）。

如果我尝试在html页面中简单地添加innerHTML代码，那么一切正常，因此http请求或angularJS标签中没有错误。

任何解决方案？感谢。

$http.get('/api/v1/getUserPaymentMethods', {params: {"idUser": myService.get()}}).success(function (data) {
    $scope.payment_methods = data;
});

document.getElementById('insert-btn').onclick = function () {
        var table = document.getElementById('table');
        var row = table.insertRow(table.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        cell1.innerHTML = 
            "<select ng-model=\"selectedMethod\" " +
                "ng-options=\"method.method for method in methods\">" +
                    "<option value=\"\" disabled selected>Method</option>" +
            "</select>";

        cell2.innerHTML = 
            "<div class=\"input-field\" style=\"display:inline-block; width: 87%\">" +
                "<input type=\"text\" ng-model=\"notes\" id=\"notes\">" +
            "</div>" +
            "<div style=\"display:inline-block; width: 10%\"> " +
                "<button id=\"confirm-btn\">done</button>" +
            "</div>";

        $http.get('/api/v1/getMethods').success(function (data) {
            $scope.methods = data;
        });
    }
}

document.getElementById('confirm-btn').onclick = function () {
    // save data
}

HTML：

<table id="table">
<thead>
<tr>
    <th style="width: 30%;" data-field="id_payment_method">Method</th>
    <th data-field="notes">Notes</th>
</tr>
</thead>

<tbody>
<tr ng-repeat="payment_method in payment_methods">
    <td>{{payment_method.id_payment_method}}</td>
    <td>{{payment_method.notes}}</td>
</tr>
</tbody>

<div style="bottom: 50px; right: 50px;">
    <button id="insert-btn">add payment method</button>
</div>

Answer 1

使用Angular，您不必手动构建html，但执行以下操作：

<table id="table">
<thead>
<tr>
    <th style="width: 30%;" data-field="id_payment_method">Method</th>
    <th data-field="notes">Notes</th>
</tr>
</thead>

<tbody>
<tr ng-repeat="payment_method in payment_methods">
    <td>{{payment_method.id_payment_method}}</td>
    <td>{{payment_method.notes}}</td>
</tr>
<tr>
    <td>
        <select ng-model="selectedMethod" ng-options="method.method for method in methods" >
         </select>
    </td>
    <td>
        <input type="text" ng-model="notes" id="notes"/>
    </td>
</tr>
</tbody>

AngularJS标签在innerHTML中不起作用

1 个答案: