Теги AngularJS не работают во innerHTML

0

В моем коде у меня есть таблица, которая заполняется тегом 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>
  • 0
    Я думаю, что вы должны держать оба элемента в самом html, для их отображения и скрытия вы должны использовать директиву ng-if="condition"
  • 1
    Я объединил директивы ng-if и ng-click и это работает

1 ответ

0

С помощью 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>
  • 0
    Я хочу, чтобы эта строка (вторая <tr> вы написали) была добавлена функцией onclick в insert-btn . Я хотел сделать этот ряд 'hidden' а затем 'visible' но там было бы раздражающее пустое место.
  • 0
    @GioeleGentile использовать для отображения или скрытия, например: <tr ng-show = 'insert' by = 'insert = false;'> <td> <select by-model = "selectedMethod" by-options = " method.method для метода в методах "> </ select> </ td> <td> <input type =" text "ng-model =" notes "id =" notes "/> </ td> </ tr> < input type = 'submit' click = 'insert =! insert;' text = 'Вставить'>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню