Angular ng-repeat不會迭代包含html的字符串數組的數組

我有一個div，我想在其旁邊放置帶有文本的複選框。Angular ng-repeat不會迭代包含html的字符串數組的數組

我正在從數據庫中這段文字，並添加JavaScript中的HTML格式和文本，我想一個數組：

var textHtmlElement = '<label class="smallPadding"><input type="checkbox">' + text + '</label>'; 
textList.splice(textList.length , 0, textHtmlElement);

的標題陣列從一個函數返回，然後分配一個$ scope變量：

$scope.list = service.getTextList();

但是，當我嘗試ng-重複該數組時，複選框和文本不顯示。

<div class="checkbox" ng-repeat="item in list"> 
    {{ item }} 
</div>

有它記錄範圍控制檯時調用list一個範圍變量：console.log($scope)。我發現奇怪的是，當我登錄console.log($scope.list)，它顯示一個空數組...如果我明確做$scope.list = ['1', '2', '3']，在NG-重複的作品，所以我想這個問題是在這條線$scope.list = service.getTextList();

我應該如何解決這個問題？在我服務

編輯的getTextList（）函數：

getTextList: function(){ 
    return textList; 
}

EDIT 2 我的服務，我得到我的數據並返回文本列表：

app.service('service', function() { 
    var textList = []; 

    return { 
     getTextList: function(){ 
      return textList; 
     }, 
     dataQuery: function() { 
      var text = ""; 
      . 
      . 
      . 
      query.find({ 
       success: function (results) { 
        for (var i = 0; i < results.length; i++) { 
         var object = results[i]; 
         text = " " + object.get('text'); 
         textList.splice(textList.length , 0, text); 
        } 
      . 
      . 
      .

我的html：

<div class="checkbox" ng-repeat="item in list"> 
    <label class="smallPadding"><input type="checkbox">{{ item }}</label> 
</div>

我的控制器保持不變 - 雖然分配給$ scope.list變量的數組不包含html。正如所建議的那樣，它只是數據。首先，我在我的服務中調用dataQuery函數，然後調用getTextList函數。

編輯3 工作代碼。我說在我的$scope.list = service.getTextList();如下：

$timeout(function(){ 
    $scope.list = service.getTextList(); 
}, 150);

的150毫秒超時給出時間查詢結束獲得將被分配到$ scope.list變量的數據。

來源

2015-09-03 Felix Gluschenkov

哪裏是第一段代碼？ –

它在我執行數據庫查詢的服務中。 –

所以，你診斷出問題出在'service.getTextList（）;'爲什麼不發佈'getTextList（）'的代碼呢？另外，你做錯了。 HTML應該由視圖生成，而不是由服務生成。服務應該返回數據，而不是HTML。 –

最佳實踐

不要使用服務來操縱你的方式，它的不良做法的DOM。而是使用你的服務來獲得你的文本數組，然後在控制器中實例化它。

從可以綁定你的陣列控制器返回到您的$scope，並在你的HTML，你應該有這樣的事情

<div class="checkbox" ng-repeat="item in list"> 
    <label class="smallPadding"><input type="checkbox">{{ item }}</label> 
</div>

也就是說，如果我明白你正在嘗試做的。

來源

2015-09-03 22:14:49

感謝您的最佳做法提示。我試過了你的建議，但它仍然無效。請參閱編輯2. –

您從哪裏獲取數組值？ HTTP？ –

不，我正在使用[Parse]（https://www.parse.com/） –

每當您從後端填充列表，並且您看到後端呼叫需要一些時間時。使用ng-if是我猜想的最佳選擇之一，因爲元素只有在數組有值時才加載。使用目前的方法，即使在150毫秒內你也不能保證數據。希望它能幫助別人。

來源

2015-12-24 06:56:46

Angular ng-repeat不會迭代包含html的字符串數組的數組

回答

相關問題