Question

好的，这是代码。这里一旦点击按钮，我想在ul。

中显示列表的值

js file

$('#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>

点击一次后，我想在ul中显示列表的值，但我无法看到结果。如果我需要附加简单的值，那么我会做到这一点

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

但是使用ng-repeat我不能用这个东西。所以请帮助我。

感谢

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

你的列表应该只存在于控制器的某个地方，然后你的代码应该只是将一个项目附加到列表中，angular会负责为你渲染它。

<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") ;
}

在Html中附加angularjs

2 个答案: