如何使用Angular.js從解析的HTML文本創建列表？

對於我的應用程序，我需要從HTML加載數據。在列表元素上，我需要解析UL子元素（LI）並在模型中序列化這些元素（映射到數組）。從這個模型中，我將創建一個模式視圖，重新創建一個列表並修改這個列表。如何使用Angular.js從解析的HTML文本創建列表？

我使用JQuery和AngularJs。我創建了一個指令，並在初始化和存儲模型中的所有內容時解析列表。但是當用模板和ng-repeat從數組中創建一個新列表時，我得到原始數據+ 3個額外的值。

HTML：

<div ng-app="MyApp"> 
    <ul ng-my-list> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
</div>

指令：

app = angular.module "MyApp", [] 

app.directive 'ngMyList', -> 
    linker = (scope, element, attrs) -> 
     scope.items = { 
      entry: element.find('li').map -> 
       $(this).text() 
     } 

    { 
     template: '<ul><li ng-repeat="item in items.entry"> > {{item}}</li></ul>' 
     replace: true 
     restrict: 'A' 
     link: linker 
     scope: {} 
    } 

angular.bootstrap document, ['MyApp']

我已提取的碼來http://jsfiddle.net/sbusso/NRLUH/。在這個例子中，我甚至無法從原始列表中獲取值。

這段代碼有什麼問題？我如何得到ng-repeat忽略額外的數組值？

UPDATE

加入了拼接（0）清潔陣列，我得到我的結果

entry: element.find('li').map (-> 
       $(this).text()).splice(0)

有AngularJS和JQuery之間的一些具體的事情？這段代碼與Backbone一起工作。

更新2

在例子中，我必須使用上下文來獲得相同的結果。我的應用程序：

scope.items = { 
     entry: $(element.context).find('li').map(-> 
      $(this).text() 
      ).splice(0) 
    }

唯一的問題還是：爲什麼地圖/ NG重複doenst發揮得很好（如果我不添加拼接（0））？

更新的代碼，顯示工作表+ 3個多餘的線條：http://jsfiddle.net/sbusso/NRLUH/5/

來源

2013-04-12 Stéphane Busso

你能提供 - >輸入和預期輸出 –

輸入是列表，預期的輸出，在這個例子中，是從解析數據指令構建的同一個列表 –

'jQuery（selector）.map（）'返回jQuery對象。使用'get（）'從'jQuery'對象解開包裝 – charlietfl

由於charlietfl完整的答案是：

使用element.context來獲得原始DOM元素
使用的get（）在JQuery(selector).map().get()中展開JQuery對象並給出一個乾淨的數組以重複ng-

來源

2013-04-13 03:56:50

如何使用Angular.js從解析的HTML文本創建列表？

回答

相關問題