AngularJS标签没有'不能在innerHTML中工作
AngularJS tags doesn't work in innerHTML
在我的代码中,我有一个由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>
相关文章:
- 转义符不能与innerHTML一起使用
- 不能在javascript innerHTML中具有类
- innerhtml不能更改(保持重置)
- Unca不能将属性“innerHTML”设置为空
- AngularJS标签没有'不能在innerHTML中工作
- jQuery.html()不能很好地与Asp.Net innerHtml配合使用
- for循环可以很好地使用console.log,但不能使用innerHTML
- 对于带有数组dos'不能使用innerHTML
- 解析AJAX HTML响应:我可以找到元素,但不能访问它们的innerHTML或值
- innerHTML没有'使用函数更改值时不能立即工作
- ie9 innerHTML不能与datatable .js创建的select元素一起工作
- getElementsByTagName("LI")不能读取属性'innerHTML'
- innerHTML不能在iPhone上工作
- 如果在Javascript中不能为.innerhtml工作
- Document.body.innerHTML.replace不能使用变量正则字符串
- 未捕获的类型错误:不能设置属性'innerHTML'为hiddenfield设置innerhtml时为n
- AngularJS:不能在ng-click之后设置元素的innerHTML
- 为什么我不能用Javascript innerHTML属性更新HTML列表项?
- 鼠标监听器不能处理innerHTML和图库中的图像
- 不能设置属性'innerHTML'在AJAX调用中为空