如何使用 Angular.js 从解析的 HTML 文本创建列表？答案

【问题标题】：How to create a list from parsed HTML text with Angular.js?如何使用 Angular.js 从解析的 HTML 文本创建列表？
【发布时间】：2013-04-12 09:29:14
【问题描述】：

对于我的应用程序，我需要从 HTML 加载数据。在列表元素上，我需要解析 UL 子元素 (LI) 并在模型中序列化这些元素（映射到数组）。从这个模型中，我将创建一个模态视图，重新创建一个列表并修改这个列表。

我使用 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 忽略额外的数组值？

更新

添加一个 splice(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)
    }

唯一的问题仍然是：为什么 map / ng-repeat 不能很好地配合使用（如果我不添加 splice(0)）？

更新代码以显示工作列表 + 3 额外行：http://jsfiddle.net/sbusso/NRLUH/5/

【问题讨论】：

你能提供->输入和预期输出
输入是列表，预期输出，在这个例子中，是由解析数据的指令构建的相同列表
jQuery(selector).map() 返回 jQuery 对象。使用get() 从jQuery 对象解包
jsfiddle.net/rcSXk
它有效，谢谢@charlietfl

标签： jquery angularjs

【解决方案1】：

感谢 charlietfl，完整的答案是：

使用element.context获取原始DOM元素
在JQuery(selector).map().get() 中使用 get() 来解开 JQuery 对象并为 ng-repeat 提供一个干净的数组

【讨论】：