Question

对于我的应用程序，我需要从HTML加载数据。在list元素上，我需要解析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 doenst一起玩得很好（如果我不添加拼接（0））？

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

Answer 1

感谢charlietfl，完整的答案是：

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

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

1 个答案: