Question

在angularJS中

我正在使用ng-repeat来构建项目列表。该列表最初是通过kendoui窗口创建的弹出窗口。有一个要求弹出窗口应该是可以固定的，所以我将div的内容移动到另一个div。到目前为止完美无缺。

通过ajax调用刷新与ng-repeat绑定的数组后，列表变为空。

我创建了一个简单的小提示，表示如果移动div，ng-repeat将停止工作。在小提琴中没有ajax调用，因此列表不会变空。

HTML：

    <p>
        <button ng-click="AddInArray()">Add</button>
    </p>
    <div id="lblDiv">
        <label ng-repeat="item in itemsArray | orderBy:'toString()'">{{item}}-{{$index}}:</label>
    </div>
    <button id="btn" ng-click="btn_click()">Move</button>
    <div id="container">
    </div>

JS：

$scope.itemsArray = ["Test"];

$scope.AddInArray = function() {
   this.itemsArray.push("Test");  
}

$scope.btn_click = function() {
   var html = $("#lblDiv").html();
   $("#container").html(html);
   $("#lblDiv").html("");
}

以下是fiddle

Answer 1

你已经清空了模板。

$("#lblDiv").html("");

应该是：

$scope.itemsArray = ["Test"];

Fiddle

如果你想实际移动div，请用以下代码替换整个函数：

$("#lblDiv").appendTo("#container");

Fiddle

Answer 2

我已经纠正了你的小提琴here。

基本上，你必须改变这个：

$scope.btn_click= function(){
    var html = $("#lblDiv");
    $("#container").append(html);
    $("#lblDiv").remove(html);
};

或者，这是一样的，但是在一行中：

$("#lblDiv").appendTo("#container");

很高兴帮忙！

Answer 3

添加它可能对您有帮助

  var myApp = angular.module('myApp',[]);

    //myApp.directive('myDirective', function() {});
    //myApp.factory('myService', function() {});

    function MyCtrl($scope) {
        $scope.name = 'Superhero';
        $scope.itemsArray = ["Test"];

        $scope.AddInArray = function() {
          this.itemsArray.push("Test");  
        };
        $scope.btn_click= function(){
    var html = $("#lblDiv");
            $("#container").html(html);
            $("#lblDiv").append("");
        };

}

如果移动div，则Angularjs ng-repeat不起作用

3 个答案: