AngularJS标签没有'不能在innerHTML中工作

AngularJS tags doesn't work in innerHTML

本文关键字:不能 innerHTML 工作 标签 AngularJS      更新时间:2023-09-26

在我的代码中,我有一个由ng-repeat标记填充的表。,没关系。点击一个按钮,innerHTML就会将一行添加到这个表中。这个新行应该包含2个单元格:

  • select
  • input-field+a确认button

我想用ng-option标签填充select,但这不会发生。移植了innerHTML的angularJS标记(以及我试图插入的任何脚本或函数)都不起作用。

methods是一个JSON,包含3种支付方式(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>

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