Angular js 之一些简单的js操作
1.<div ng-if()> </div> 括号里面是布尔值 如果是false那么你ng-if的那个dom就会不显示。(感觉这是angular js中最给力的一点)
一般会在controller里面来设置ng-if(abc)括号里面值得布尔值 ,类似$scope.abc=true; 如果你想默认一个值为true ,一般用于不常见
的一个字符然后设置ng-if(!abcd) 这样默认为true。 在实际操作中 遇到那种ng-repeat出来的值,需要判断排列或者是否显示的时候,
这个时候ng-if()的作用就尤为明显。比如你只想让大于60分成绩的学生显示,但是页面上的显示成绩又是ng-repeat打印出来的,
可以ng-if(item.num>=60),成绩小于60则为flase 既不会打印出来。
2.ng-class().....
第一种情况 ng-class="{'类选择器1':布尔值,'类选择器2':布尔值}"(这种情况适用于大于等于三种类选择器的时候)
第二种情况 ng-class="{true:
'类选择器1', false: '类选择器2'}[布尔值]"(这种情况适用于两种类选择器的时候)
其他情况还没遇到过 以后还会补充。
3.利用三目运算符打印出ng-repeat想要的结果。
比如大于等于60表示及格,小于60表示不及格。
{{item.num
>=60? "及格":"不及格"}}
如果出现情况比较复杂的时候 可以自己封装一个过滤器
如上所示如果data等于1的时候 返回买入;等于2的时候返回卖出
过滤器在页面的使用
{{div.entrust_bs|oneFilter}}
4.在关于页面向上拉加载更多和向下拉刷新的问题
(1).向上拉加载更多,一般会在页面的content部分的最底部写如下代码 然后在controller中执行loadMore函数,当实行完一次
loadMore函数的时候 在函数内部的最底部写上
$scope.$broadcast('scroll.infiniteScrollComplete');
这样函数就会自动不执行关闭不在继续刷新
<ion-infinite-scroll on-infinite="loadMore()"
></ion-infinite-scroll>
附加一些加载更多的一些心得 如果加载更多不想去掉以前的data可以在创建一个数组,然后是每次刷新得到新的data就把data拼接起来赋值到一个空数组里面
newdata= newdata.concat(data.data)
(2)向下拉刷新一般放在content的最上部 然后在controller中执行doRefresh函数,当不想执行的时候用
$scope.$broadcast('scroll.refreshComplete');关闭函数
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
Angular js 之一些简单的js操作的更多相关文章
- Epii.js 一个极其简单的Js模板引擎
Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- 在 Angular 2 Component 中使用第三方 JS 库
本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.sv ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- JS代码的简单重构与优化
JS代码的简单重构与优化(适合新手) 原文 http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- 分享几个日常调试方法让js调试更简单
下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...
随机推荐
- No identities are available for signing的解决方法
今天将做好的app提交到app store,结果就出现标题上的错误.“No identities are available for signing”.这个错误对于一个iOS开发者来说已经很平常了,这 ...
- 据说年薪30万的Android程序员必须知道的帖子
Android中国开发精英 目前包括: Android开源项目第一篇--个性化控件(View)篇 包括ListView.ActionBar.Menu.ViewPager.Gallery.G ...
- C++Builder XE8_upd1破解安装成功纪要
1.先下载XE8,安装失败.2.后下载XE8U1(delphicbuilder_xe8_upd1_subscription.iso),安装,选择DelPhi.C++builder,输入系列号:3.安装 ...
- flume的使用
1.flume的安装和配置 1.1 配置java_home,修改/opt/cdh/flume-1.5.0-cdh5.3.6/conf/flume-env.sh文件
- Overload和Override的区别
Overload:重载 |- 在一个类中定义的若干方法 |- 所有的方法名相同,但参数类型或个数不同 |- 只有参数有关,与返回类型无关 Override:覆写 |- 在继承的关系中 |- 子类定义了 ...
- nRF52832开发日志--SAADC调试
今天各种事情比较多.......技术活时间略少,就搞了这一项~ 52832的ADC和之前51822系列还是有蛮大差别的: 1.支持差分输入方式,测量结果为两输入端口电压差的转换的有符号数值,这个功能对 ...
- 利用scrapy-splash爬取JS生成的动态页面
目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...
- 用css实现三级导航菜单
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...
- Mac系统下配置JDK环境变量
第一次用Mac做开发,在网上也搜索了一些环境变量配置的文章,在此总结一下以方便日后使用. 1.打开终端Terminal: 2.进入当前用户主目录,cd ~: 3.临时授权,sudo su: 4.输入密 ...
- 自定义样式 实现文件控件input[type='file']
一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...