2015-02-02 2 views
0

Я пытаюсь добавить новую строку в таблицу, где существующие строки создаются ng-repeat. Но, когда я нажимаю кнопку добавления новой кнопки, чем добавляю новую строку, она удаляет существующие строки и добавляет новые. может ли кто-нибудь помочь мне в этом отношении?Почему в angularjs .append действует как .html?

вот код и fiddle link.

var app = angular.module("app", []); 
app.controller("simpleController", function($scope) 
{ 
    var descriptions = ['item1','item2','tem3']; 
    $scope.items = descriptions; 

}); 

app.directive("addRow",function($compile) 
{ 
    var newRow; 
    newRow = '<tr><td>New Description</td><td><a href="javascript:void(0)" add-row>+</a></td><td><a href="javascript:void(0)" delete-row>-</a></td></tr>'; 
    return{ 
     restrict: 'A', 
     link: function(scope, element,attrs,controller){ 
      element.on("click", function() { 
       console.log("clicked on activity add row"); 
       $compile(element.parent().parent().parent().append(newRow))(scope); 
      }); 
     } 
    } 
+0

вот ссылка на скрипку: http://jsfiddle.net/5owkkfu0/1/ – BeginnertoUI

ответ

-1

Всякий раз, когда мы хотим вставить новый элемент внутри углового элемента, он не будет понимать угловой непосредственно. Сначала нам нужно запустить этот элемент с помощью компиляции с использованием API $compile, а затем добавить его в элемент.

Вам необходимо ввести код, как показано ниже. Вам нужно сначала скомпилировать ваш элемент, а затем добавить его в элемент.

element.on("click", function() { 
    console.log("clicked on activity add row"); 
    element.parent().parent().parent().append($compile(newRow)(scope)); 
}); 

Working Fiddle

По наблюдению @huanfeng, <tr> не работает должным образом, его преобразуются в пролете. После того, как я нашел, есть issue с AngularJS. Для решения этой проблемы вы можете использовать любое рабочее решение из ссылки на выпуск.

Update 1

Вместо добавления элемента вы можете сделать это более Simpler way

только нажать переменную внутри ng-repeat массива т.е. $scope.items.push('New Description'). ng-repeat предоставит вам еще одно ваше описание.

Спасибо.

+0

удивительный .. спасибо тонну @pankajparkar .. вы ответили мне на работу :) – BeginnertoUI

+0

@BeginnertoUI Спасибо .. Не забывайте отметьте ответ как правильный. –

+1

Могу ли я спросить, почему tr td меняется на span? –

Смежные вопросы