--------------【Ionic入门】（1）
【移动端】（1）
& & & &看过Ionic官网的,都知道Ionic有成型的CSS文档和JS文档. 对于初学者来说,帮助文档是最好的学习材料. 在刚接触Ionic和AngularJS的时候,基本的东西都不了解,就经常性的看文档.看demo,实现一下,发现移动端挺好玩的,界面又好看.
& & & 今天介绍一下Ionic列表,其实也是罗列一下常用的几种:
1.带头像的列表:
& & & 这种形式就是咱们的微信,QQ常用的界面,带头像的列表.
& & & & & & & & & & &&
&div class=&list&&
&a class=&item item-avatar& href=&#&&
&img src=&/try/demo_source/venkman.jpg&&
&h2&Venkman&/h2&
&p&Back off, man. I'm a scientist.&/p&
&a class=&item item-avatar& href=&#&&
&img src=&/try/demo_source/spengler.jpg&&
&h2&Egon&/h2&
&p&We're gonna go full stream.&/p&
&a class=&item item-avatar& href=&#&&
&img src=&/try/demo_source/stantz.jpg&&
&h2&Ray&/h2&
&p&Ugly little spud, isn't he?&/p&
& & & & & & & & & &&
2.缩略图的列表:
& & &这种列表,有些团购,等等网站的页面会使用.
& & & & & & && & & & & & &&
&div class=&list&&
&a class=&item item-thumbnail-left& href=&#&&
&img src=&/try/demo_source/blue-album.jpg&&
&h2&Weezer&/h2&
&p&Blue Album&/p&
&a class=&item item-thumbnail-left& href=&#&&
&img src=&/try/demo_source/siamese-dream.jpg&&
&h2&Smashing Pumpkins&/h2&
&p&Siamese Dream&/p&
&a class=&item item-thumbnail-left& href=&#&&
&img src=&/try/demo_source/dookie.jpg&&
&h2&Green Day&/h2&
&p&Dookie&/p&
&/div&& & & & & & & & & & & & & & & &&
3.collection-repeat和ng-repeat指令
& & & &不管什么形式的List在使用时,都是不确定的数据条数,可能有10条可能上万条.这时候这两个指令就突出了它们的作用.
& & collection-repeat:可以说是高性能的ng-repeat，适用于大数据量的情况.
&ion-content has-tabs=&true& on-refresh=&onRefresh()&&
&ion-refresher&&/ion-refresher&
&ion-list scroll=&false& on-refresh=&onRefresh()&
s-editing=&isEditingItems&
animation=&fade-out&
delete-icon=&icon ion-minus-circled&&
&ion-item ng-repeat=&item in items&
item=&item&
buttons=&item.buttons&
can-delete=&true&
can-swipe=&true&
on-delete=&deleteItem(item)&
ng-class=&{completed: item.isCompleted}&&
{{item.title}}
&i class=&{{item.icon}}&&&/i&
&/ion-item&
&/ion-list&
&/ion-content&& & & & & & & & & & & & & & & &&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：68415次
积分：4746
积分：4746
排名：第3925名
原创：91篇
评论：2089条
阅读：2437
(4)(3)(5)(4)(4)(2)(2)(3)(4)(3)(2)(1)(2)(1)(3)(2)(3)(4)(2)(4)(3)(2)(3)(2)(3)(9)(1)(2)(2)(2)(1)(2)(4)ng-repeat怎么实现的？_问答_ThinkSAAS
ng-repeat怎么实现的？
ng-repeat怎么实现的？
最近在重造一个ng-repeat的轮子，正则表达式实在有点难，只能在这里践行下拿来主义。要有实现嵌套循环的。
可以改造下：
&div ng-repeat="v in vs"&{{v}}&/div endrepeat&
{{}}表达式我已经实现。
跪求原理或者您的方案，最好能说下一些正则的写法。
var match = expression.match(/^s*([sS]+?)s+ins+([sS]+?)(?:s+ass+([sS]+?))?(?:s+tracks+bys+([sS]+?))?s*$/);
if (!match) {
throw ngRepeatMinErr('iexp',"Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '{0}'.",expression);
var lhs = match[1];
var rhs = match[2];
var aliasAs = match[3];
var trackByExp = match[4];
match = lhs.match(/^(?:([$w]+)|(([$w]+)s*,s*([$w]+)))$/);
if (!match) {
throw ngRepeatMinErr('iidexp',"'_item_' in '_item_ in _collection_' should be an identifier or '(_key_, _value_)' expression, but got '{0}'.",lhs);
var valueIdentifier = match[3] || match[1];
var keyIdentifier = match[2];
if (aliasAs && (!/^[$a-zA-Z_][$a-zA-Z0-9_]*$/.test(aliasAs) ||
/^(null|undefined|this|$index|$first|$middle|$last|$even|$odd|$parent)$/.test(aliasAs))) {
throw ngRepeatMinErr('badident',"alias '{0}' is invalid --- must be a valid JS identifier which is not a reserved name.",aliasAs);
这几段代码是用来判断ng-repeat表达式是否合法，并从中提取变量名的。。。反正我是没有耐心看这些正则表达式。
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。
关注微信，更好学习AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化，但是我们开发过程中的不当使用还是会对性能产生巨大影响。
下面提出几点优化的方法：
1.&使用单次绑定符号{{::value}}
AngularJS的性能优化方法之一是减少双向绑定。我们知道AngularJS的双向绑定是通过为每个需要双向绑定的数据对象添加$$watchers,一旦某个scope的数据发生了更新，就触发脏检测($digest)，深度优先遍历所有scope对象的$$watchers值的old/new value是否发生变化。所以在开发过程中，我们都要小心判断创建出的每个$$watchers是否有必要。对于只需要更新一次，以后不管数据层如何变化都不需要更新的数据，使用连续两个冒号即可在在$$watchers列表中将这个值删除，即减少了$digest脏检测循环。
2. ng-repeat优化
第一种方式虽然减少了脏检测的次数，但是单次绑定的数据毕竟少数，可能加完单次绑定，性能提升并没有太大。如果我们的代码中使用了ng-repeat,并且list数量很大时，我们的性能会有很大下降，在移动端尤为明显。下面几点是对ng-repeat指令的优化。
使用limitTo来减少第一次加载列表元素的数量，以提高初始化页面的速度。我们也许有上百上千条数据要显示，但是屏幕的大小毕竟有限，呈现在用户眼前的可能就是个或者360x640大小的屏幕，那我们可以先加载用户所能看到几个十几个列表。limitTo属性就提供了这样的功能。
　　&li ng-repeat="mail in mails |limitTo:loadMailLimitTo"&&/li&
使用track by属性。比如我们有下面一段代码
&li ng-repeat="mail in mails"&
{{mail.id}}:{{mail.title}}
如果我们想更新mails里面的值，我们可能会这么做：
$scope.mails = newMailListFromS
上一行代码会告诉ng-repeat去删除掉所有的li元素，再去重新生成一套新的li，这意味着大量的DOM操作，尤其当li元素里面有 复杂的逻辑判断和双向绑定数据。这是因为ng-repeat在创建时会给每个mail加上$hashkey属性，并时时跟踪，一旦mails元素替换成服务器 返回的对象，即时他们完全一样，由于他们没有$hashkey,所以ng-repeat不会知道他们是一样的元素。而通过如下的改动：
&li ng-repeat="mail in mails track by mail.id"&&/li&
ng-repeat会跟踪我们创建的mail.id去判断是否为新的元素。这样就减少了大量的DOM删减添加操作。需要注意的是，如果limitTo和track by一起使用的时候，需要把track by放到最后，如
&li ng-repeat="mail in mails | limitTo:loadMailLimitTo track by mail.id"&&/li&
如果有引入ionic框架，可以使用collection-repeat替代ng-repeat。
collection-repeat是ionic框架自己的一套显示list的指令，原理在于不论list有多大，页面最多只有一定数量的item,这个item数量的大小是通过屏幕高度和单个item的高度计算出来的。滑动列表时通过更新item元素的页面内容和位置来呈现所有的items。所以在大数量级的list呈现上，collection-repeat会比ng-repeat性能好很多。但是需要注意的是，由于collection-repeat是通过时时更新滑动位置的item内容来实现的，所以在item内部使用第一个方法的单次绑定方式，滑动后会造成页面混乱的情况。
3. 减少html页面中的filter
原因是每当filter执行时，都会走两次$digest cycle，一次是scope中有数据改动，一次是查看是否有更多的改动需要更新数据。当数据量很大时对性能会有很大影响。我们可以在初始化时就格式化好数据，比如赋值到view层之前，在我们的js代码里使用angular提供的$filter provider来预处理我们的数据。
4. ng-if替代ng-show/ng-hide
原因是ng-if与ng-show/ng-hide的不同之处在于，ng-if在等于false时会把元素从DOM中移除，所以所有绑在该元素上的handler会一同失效。而ng-show/ng-hide不会移除DOM元素，而是使用css style去隐藏/显示DOM元素，所以handlers会一直存在。
5. $scope.$apply()和$scope.$digest()
我们会用到上面两种去执行一次脏检测，刷新页面数据。区别就是$scope.$apply()会从$rootscope开始，深度优先遍历执行$digest循环，而$scope.$digest会从当前scope开始，往下层scope遍历脏检测。如果只是期望当前scope的数据更新，而不涉及到parent $scope，则可以使用$scope.$digest()。
6. angular animate
如果我们的项目引入了angular-animate.js的模块，那么在大部分使用了指令的元素上，animate里面的代码都会被执行，不管当前元素是否有应用css动画样式。这对我们页面上如果有大量数据频繁滑动，隐藏显示的时候会有比较明显的性能问题。如果我们对当前scope并没有渐入渐出等动画效果的时候，可以在当前scope初始化时加上$animate.enabled(false);当然，我们也可以对某个元素进行禁止动画的动作：$animate.enabled(element, false);
7. ionicSlideBox优化（只针对使用了ionic框架的项目）
初始化slidebox时先初始化显示中间的首先显示在用户面前的slide，其他的slide可以在$timeout里面延迟初始化。思想和ng-repeat的limitTo比较类似。
slidebox的滑动速度在ionic框架中默认速度是300ms滑完一个slide,通过改变这个速度来使滑动更快速。
阅读(...) 评论()Ionic（8）
一.列表 : ion-list
& &列表是常用的信息组织方式。在ionic中，使用ion-list指令声明列表 元素，使用ion-item指令声明成员元素：
&ion-list&
&ion-item&...&/ion-item&
&ion-item&...&/ion-item&
&/ion-list&& &ion-list指令提供以下属性用来定制列表的外观：
type - 列表种类。type属性是可选的，可用来设置列表的种类： list-inset | card。这两种列表 都产生内嵌的效果，区别在于card列表有边框的阴影效果。
show-delete - 是否显示成员内的delete按钮。show-delete属性是可选的。如果在成员内有delete按钮（ion-delete-button），使用这个 属性来通知列表是否显示元素删除按钮。允许的值为：true | false.
show-reorder - 是否显示成员内的reorder按钮。show-reorder属性是可选的。如果在成员内有reorder按钮（ion-reorder-button），使用这个 属性来通知列表是否显示元素重排序按钮。允许的值为：true | false.
can-swipe - 是否支持滑动方式显示成员option按钮。can-swipe属性是可选的。如果在成员内有option按钮（ion-option-button），使用这个 属性来允许或禁止通过向左滑动成员来打开option按钮。允许的值为：true | false ，默认为true。
&!DOCTYPE html&
&html ng-app=&myApp&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height&&
&script src=&../lib/js/ionic.bundle.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&../lib/css/ionic.min.css&&
ng-controller=&myCtrl&&
&ion-header-bar class=&bar-positive&&
&h1 class=&title&&ion-list&/h1&
&/ion-header-bar&
&ion-content&
&ion-list can-swipe=&true&&
&ion-item ng-repeat=&item in items&&
&ion-option-button class=&button-calm icon ion-edit&&&/ion-option-button&
&ion-option-button class=&button-energized icon ion-share&&&/ion-option-button&
&/ion-item&
&/ion-list&
&/ion-content&
angular.module(&myApp&,[&ionic&])
.controller(&myCtrl&,function($scope){
$scope.items = [];
for(var i=0;i&10;i++)
$scope.items.push([&item list &,i+1].join(&&));
二.ion-list ion-item 成员
& &ion-item有三种预定义的按钮：&
ion-option-button - 选项按钮。&一个ion-item内可以包含多个选项按钮。选项按钮是隐藏的，需要用户向左 滑动成员，以显示选项按钮。可以使用ion-list的can-swipe属性允许或禁止 滑动开启选项按钮。 使用ng-click指令来挂接点击事件监听函数，其原型如下：var optionListener = function(item){...} ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。&ion-delete-button - 删除按钮 一个ion-item内最多有一个删除按钮。删除按钮在显示时总是位于成员的最 左端。可以使用ion-list的show-delete属性显示或隐藏删除按钮 使用ng-click指令来挂接点击事件监听函数，其原型如下：var deleteListener = function(item){...}ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。&ion-reorder-button - 重排按钮 一个ion-item内最多有一个重排按钮。重排按钮在显示时总是位于成员的最右端。可以使用ion-list的show-reorder属性显示或隐藏重排按钮 使用on-reorder属性来挂接重排事件监听函数，其原型如下：var reorderListener = function(item,$fromIndex,$toIndex){...} ionic在捕捉到用户的重排事件时，将调用此函数，并传入当前的item对象、原序号及目标序号。
&!DOCTYPE html&
&html ng-app=&myApp&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height&&
&script src=&../lib/js/ionic.bundle.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&../lib/css/ionic.min.css&&
&body ng-controller=&myCtrl&&
&ion-header-bar class=&bar-positive&&
&a class=&button button-clear icon ion-ios-minus-outline& ng-click=&flag.showDelete=!flag.showDflag.showReorder=&&&/a&
&h1 class=&title&&成员按钮&/h1&
&a class=&button& ng-click=&flag.showReorder=!flag.showRflag.showDelete=&&重新排序&/a&
&/ion-header-bar&
&ion-content&
&ion-list show-delete=&flag.showDelete& show-reorder=&flag.showReorder&&
&ion-item ng-repeat=&item in items&&
&ion-option-button class=&button-calm&&...&/ion-option-button&
&ion-delete-button class=&ion-minus-circled& ng-click=&delete_item(item)&&&/ion-delete-button&
&ion-reorder-button class=&ion-navicon& on-reorder=&move_item(item,$fromIndex,$toIndex)&&&/ion-reorder-button&
&/ion-item&
&/ion-list&
&/ion-content&
angular.module(&myApp&,[&ionic&])
.controller(&myCtrl&,function($scope){
$scope.flag={showDelete:false,showReorder:false};
$scope.items=[&Chinese&,&English&,&German&,&Italian&,&Janapese&,&Sweden&,&Koeran&,&Russian&,&French&];
$scope.delete_item=function(item){
var idx = $scope.items.indexOf(item);
$scope.items.splice(idx,1);
$scope.move_item = function(item, fromIndex, toIndex) {
console.log(fromIndex);
console.log(toIndex);
console.log(item);
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
console.log(item);
三. collection-repeat : 高性能的ng-repeat
collection-repeat指令和ng-repeat指令类似，但是更适用于大数据量 的列表数据，这是因为，它只将处于可视区域的数据渲染到DOM上：
&any collection-repeat=&...&&...&/any&collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width - 可选。声明重复元素的宽度&item-height - 可选。声明重复元素的高度&item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3&force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false
&!DOCTYPE html&
&html ng-app=&myApp&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height&&
&script src=&../lib/js/ionic.bundle.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&../lib/css/ionic.min.css&&
ng-controller=&myCtrl&&
&ion-header-bar class=&bar-positive&&
&h1 class=&title&&collection-repeat&/h1&
&/ion-header-bar&
&ion-content&
&ion-list&
&ion-item collection-repeat=&item in items&&
&ion-option-button class=&button-positive&&...&/ion-option-button&
&/ion-item&
&/ion-list&
&/ion-content&
&script type=&text/javascript&&
angular.module(&myApp&,[&ionic&])
.controller(&myCtrl&,function($scope){
$scope.items = [];
for(var i=0;i&5000;i++)
$scope.items.push([&item&,i+1].join(&&));
四.脚本接口 : $ionicListDelegate
& &如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务：&
showReorder([showReorder]) - 显示/关闭排序按钮 showReorder的允许值为：true | false。可以使用一个作用域上的表达式。showDelete([showDelete]) - 显示/关闭删除按钮 showDelete的允许值为： true | false。可以使用一个作用域上的表达式。canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮 canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式 closeOptionButtons() - 关闭所有选项按钮。
&!DOCTYPE html&
&html ng-app=&ezApp&&
&meta charset=&UTF-8&&
&meta name=&viewport& content=&initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height&&
&script src=&../lib/js/ionic.bundle.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&../lib/css/ionic.min.css&&
ng-controller=&myCtrl&&
&ion-header-bar align-title=&left& class=&bar-positive&&
&h1 class=&title&&$ionicListDelegate&/h1&
&a class=&button& ng-click=&close();&&关闭选项&/a&
&/ion-header-bar&
&ion-content&
&ion-list&
&ion-item ng-repeat=&item in items&&
&ion-option-button class=&button-calm icon ion-share&&&/ion-option-button&
&/ion-item&
&/ion-list&
&/ion-content&
angular.module(&ezApp&,[&ionic&])
.controller(&myCtrl&,[&$scope&,&$ionicListDelegate&,function($scope,$ionicListDelegate){
$scope.items = [&Chinese&,&English&,&Russian&,&Japanese&];
var flag =
$scope.close = function(){
$ionicListDelegate.closeOptionButtons();
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：63457次
积分：2685
积分：2685
排名：第9088名
原创：201篇
转载：69篇
评论：10条
(1)(4)(18)(9)(11)(9)(7)(18)(17)(15)(15)(75)(55)(18)