1

对于我的应用程序，我需要从 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 忽略额外的数组值？

更新

添加一个拼接（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/

4

1 回答 1

2

感谢charlietfl，完整的答案是：

  • 用于element.context获取原始 DOM 元素
  • 使用get() inJQuery(selector).map().get()解包 JQuery 对象并为 ng-repeat 提供一个干净的数组
于 2013-04-13T03:56:50.600 回答