使用angular.js滚动HTML数据
Scrolling HTML data with angular.js
我试图重复列表与angular.js的html
数据。我想用ngInfiniteScroll
所以我建立了一个模板,像这样。
更新:<div class="scroll" id="antTalkList" talk-type="total" view-type="total"
infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='2'>
<ul class="user_list list ng-scope" ng-repeat="item in $ctrl.htmlViews">
<ng-bind-html ng-bind-html="item"> </ng-bind-html>
</ul>
</div>
如上所述,我不知道如何在ul
中重复$ctrl.htmlViews
。每个htmlViews的项都用上面的HTML数据填充。
<li ... > ... </li> ... <li ... > ... </li>
这是我的antList
组件。在控制器中,htmlViews
在控制器初始化和滚动(loadMore函数)时由ajax调用推送。
ng-repeat
似乎还好,也许它工作得很好。然而,infinite-scroll
不工作。我添加了infinite-scroll="$ctrl.loadMore()"
和infinite-scroll-distance='10'
。
LoadMore函数在初始化时调用,但在滚动时不调用。我如何检查这个箱子?
这是我的组件片段。
.component('antList', {
templateUrl : 'templates/ant-list.html'
, controller : function AntListController($http, $attrs, $sce){
var self = this;
this.htmlViews = [];
this.loading = false;
$http({
method : "GET",
url : "ant/list?sectionId="+$attrs.talkType+"&pageCount=20&startIndex=0"
}).then(function mySucces(response) {
self.htmlViews.push($sce.trustAsHtml(response.data));
});
this.loadMore = function(){
$http({
method : "GET",
url : 'ant/list?pageCount=20&startIndex='
+ $('#antTalkList .user_list li').size()
+ '§ionId=' +$attrs.talkType
}).then(function mySucces(response) {
self.htmlViews.push($sce.trustAsHtml(response.data));
});
}
}
})
<div class="scroll" id="antTalkList" talk-type="total" view-type="total"
infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<ul class="user_list list ng-scope">
<li ng-repeat="view in htmlViews">
{{view}}
</li>
</ul>
</div>
相关文章:
- 在页面呈现之前更改HTML数据
- 当使用ajax并将html数据保存为对象时,收听浏览器返回按钮.好的或坏的
- 使用数据属性将HTML数据复制到另一个元素
- 使用jQuery在select选项上设置HTML数据属性
- 使用Javascript而不是html数据属性配置Parsley
- 访问HTML数据集
- 如何调用更改事件,例如在 HTML 数据列表上选择
- 检测 点击 在 ANDROID 中使用 HTML 数据查看
- 选择具有特定值的 html 数据属性
- jQuery的HTML数据效果
- 生成html时,在html数据属性中存储由.push()填充的数组
- Powerbuilder/Javascript HTML数据窗口SetItem日期时间失败
- html数据属性在firefox中使用javascript时没有按预期显示,但在chrome中显示正确
- 由于数据中的 & 符号,无法在 C# 上传递整个 html 数据
- 内联 HTML 数据角色<>脚本 jquery:Kendo Widget Initialization
- 如何将带有普通对象集合的 Js 数组对象传递给 ajax post'html' 数据类型中的控制器
- 使用 PrototypeJS 1.6 访问锚点上的 HTML 数据属性
- 如何更改 HTML 数据列表输入上显示的图标?隐藏是可能的,但我可以将其更改为其他一些图标,例如向下箭头
- Android - 如何在运行时生成的HTML数据中加载外部javascript文件
- 从 html 数据设置 jquery 延迟