如果div被移動，Angularjs ng-repeat不起作用

in angularJS我正在使用ng-repeat構建項目列表。該列表最初是在通過kendoui窗口創建的彈出窗口中。有一個要求，彈出應pinnable所以我將div的內容移動到另一個div。迄今爲止完美的作品。如果div被移動，Angularjs ng-repeat不起作用

當我通過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

來源

2014-10-31 Haris

我已更正您的小提琴here。

基本上，你必須改變這一點：

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

或者說，這是一樣的，但在一個行：

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

很樂意幫忙！

來源

2014-10-31 12:35:36 Kutyel

你已經倒空的模板。

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

應該是：

$scope.itemsArray = ["Test"];

Fiddle

如果你想真正移動DIV與更換整個功能：

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

Fiddle

來源

2014-10-31 12:24:47 Jonathan

這就是原來的容器。我已經將東西形式lblDiv移動到容器。請檢查小提琴 – Haris 2014-10-31 12:26:26

您正在移動結果HTML，而不是模板。 – Jonathan 2014-10-31 12:27:45

如何移動模板？ – Haris 2014-10-31 12:28:57

添加這一塊它可以幫助你

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

}

來源

2014-10-31 13:25:13 user3722785

如果div被移動，Angularjs ng-repeat不起作用

回答

相關問題