In my code i've a table which is populated by ng-repeat
tag., and that's ok. By clicking a button, a row is added to this table by innerHTML. This new row should contain 2 cells:
select
input-field
+ a confirm button
I want to populate the select
with ng-option
tag, and this is not going to happend. The angularJS tags (and whatever script or function i try to insert) grafted with innerHTML do not work.
methods
is a JSON containing 3 payment methods (PayPal, Postepay, Skrill).
payment_methods
contains the user payment methods (method + notes).
If i try to add the innerHTML code simply in the html page, it all works, so there's no bug in http requests or angularJS tags.
Any solution? Thanks.
$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>
With Angular you don't have to build html manually, but do something like this:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.