Jquery 如何使用Angular.js从解析的HTML文本创建列表?
对于我的应用程序,我需要从HTML加载数据。在列表元素上,我需要解析UL子元素(LI)并在模型中序列化这些元素(映射到数组)。从这个模型中,我将创建一个模态视图,重新创建一个列表并修改这个列表 我使用JQuery和AngularJs。我已经创建了一个指令,并在初始化和存储模型中的所有内容时解析列表。但是,当使用模板和ng repeat从数组创建新列表时,我会得到原始数据+3个额外值 Html:Jquery 如何使用Angular.js从解析的HTML文本创建列表?,jquery,angularjs,Jquery,Angularjs,对于我的应用程序,我需要从HTML加载数据。在列表元素上,我需要解析UL子元素(LI)并在模型中序列化这些元素(映射到数组)。从这个模型中,我将创建一个模态视图,重新创建一个列表并修改这个列表 我使用JQuery和AngularJs。我已经创建了一个指令,并在初始化和存储模型中的所有内容时解析列表。但是,当使用模板和ng repeat从数组创建新列表时,我会得到原始数据+3个额外值 Html: 一个 两个 三 四 指令: app=angular.module“MyApp”,[] 应用程序
- 一个
- 两个
- 三
- 四
指令:
app=angular.module“MyApp”,[]
应用程序指令“ngMyList”,->
链接器=(范围、元素、属性)->
scope.items={
条目:element.find('li')。map->
$(this.text())
}
{
模板:'- {{item}}
'
替换:正确
限制:“A”
链接:链接器
作用域:{}
}
angular.bootstrap文档,['MyApp']
我已将代码提取到。在本例中,我甚至无法从原始列表中获取值
这个代码有什么问题?如何在忽略额外数组值的情况下获得ng repeat
更新
添加一个拼接(0)清理阵列,我得到我的结果
entry: element.find('li').map (->
$(this).text()).splice(0)
AngularJS和JQuery之间有什么特别的东西吗?这段代码使用的是主干网
更新2
在示例中,我必须使用上下文来获得与我的应用程序相同的结果:
scope.items = {
entry: $(element.context).find('li').map( ->
$(this).text()
).splice(0)
}
唯一的问题是:为什么map/ng repeat不能很好地结合在一起(如果我不添加拼接(0))
更新代码以显示工作列表+3行额外代码:感谢charlietfl,完整答案是:
- 使用
获取原始DOM元素element.context
- 在
中使用get()来展开JQuery对象,并为其提供一个干净的数组JQuery(selector).map().get()
jQuery(selector).map()生成的相同列表。
返回jQuery对象。使用get()