Добавление angularjs в Html

Question

OK это код. Здесь, когда нажата кнопка, я хочу показать значение списка в ul.

JS файл

$('#myBox').append("<li ng-repeat='name in event'>"{{name}}"</li>"); 

файл HTML

<ul id='myBox'></ul> 
<button class="btn btn-default" ng-click="sometask()">Click me</div> 

После щелчка Нажмите я хочу, чтобы отобразить значение списка в ул но я не в состоянии видеть результат. , если мне нужно добавить простое значение, то я сделал бы это

var name = "Hello World"; 
$('#myBox').append("<li>"+name+"</li>"); 

Но используя нг-повтор я не мог использовать эту вещь. Пожалуйста, помогите мне.

Спасибо

Answer 1

Вам нужно скомпилировать HTML, прежде чем вставить его в DOM.

var myApp = angular.module('myApp', []); 
    myApp.controller('AngularCtrl',['$scope','$compile',function($scope,$compile){ 
      $scope.event = ['one','two','three','four','five']; 
      $scope.sometask = function(){ 
       var html = $compile("<li ng-repeat='name in event'>{{name}}</li>")($scope); 
      angular.element(document.querySelector('#myBox')).append(html); 
      } 
    }]); 

Answer 2

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

<div ng-controller="listCtrl"> 
<ul id='myBox' > 
    <li ng-repeat='name in event'> 
     name 
    </li> 
</ul> 
<button class="btn btn-default" ng-click="sometask()">Click me</div> 

то в вашем контроллере вы должны иметь что-то вроде:

$scope.sometask = function() { 
    event.push("new name") ; 
}