В моем коде у меня есть таблица, которая заполняется тегом ng-repeat
. И это нормально. Нажав кнопку, в эту таблицу добавляется строка innerHTML. Эта новая строка должна содержать 2 ячейки:
select
input-field
+ button
подтверждения Я хочу заполнить select
тегом ng-option
, и это не произойдет. Теги angularJS (и любой скрипт или функция, которые я пытаюсь вставить), привитые с помощью innerHTML, не работают.
methods
- это JSON, содержащий 3 способа оплаты (PayPal, Postepay, Skrill).
payment_methods
содержит способы оплаты пользователя (метод + примечания).
Если я пытаюсь добавить код innerHTML просто на html-странице, все это работает, поэтому нет ошибок в 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>
<tr>
вы написали) была добавлена функцией onclick
в insert-btn
. Я хотел сделать этот ряд 'hidden'
а затем 'visible'
но там было бы раздражающее пустое место.
ng-if="condition"
ng-if
иng-click
и это работает