Angular js 之一些简单的js操作

时间:2022-11-07 11:52:26

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操作的更多相关文章

  1. Epii&period;js 一个极其简单的Js模板引擎

    Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD &amp&semi;&amp&semi; CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP &amp&semi;&amp&semi; CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. vue&period;js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  4. 在 Angular 2 Component 中使用第三方 JS 库

    本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.sv ...

  5. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  6. Headroom&period;js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  7. JS代码的简单重构与优化

    JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...

  8. MVC3&period;0&plus;knockout&period;js&plus;Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  9. 分享几个日常调试方法让js调试更简单

    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...

随机推荐

  1. css 里层元素撑不开外层元素

    一般是,里面那层做了高度设置,如:height, overflow等 另外可以让里面元素清楚浮动,如:clear:both

  2. PHP之运用CI用钩子实现URL权限控制————————【Badboy】

    <span style="background-color: rgb(247, 252, 255); font-family: Verdana, Arial, Helvetica, s ...

  3. 模仿jquery的fileupload插件

    仅需要new一个对象,将上传后台的url和点击触发上传的元素id传给对象,就可以自从实现上传 暂不支持IE <html> <body> <a href="#&q ...

  4. odoo之页面跳转

    击备注时,会由备注id带出他的内容 customer.requirement这是备注内容表 def sale_requirements_change(self, cr, uid, ids, requi ...

  5. core Animation之CAAnimationGroup&lpar;动画群组&rpar;

    可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行 属性解析: animations:用来保存一组动画对象的NSArray 默认情况下,一组动画对象 ...

  6. python3&period;5 连接mysql

      I did the steps below with Python 3.5.1 and it works: Download driver from here Driver installatio ...

  7. 为npm设置代理

    npm全称为Node Packaged Modules.它是一个用于管理基于node.js编写的package的命令行工具.其本身就是基于node.js写的,这有点像gem与ruby的关系. 在我们的 ...

  8. HDU 2204 Eddy&&num;39&semi;s爱好(容斥原理dfs写法)题解

    题意:定义如果一个数能表示为M^k,那么这个数是好数,问你1~n有几个好数. 思路:如果k是合数,显然会有重复,比如a^(b*c) == (a^b)^c,那么我们打个素数表,指数只枚举素数,2^60 ...

  9. linux及安全《Linux内核设计与实现》第三章——20135227黄晓妍

    第三章 (由于linux不区分进程和线程,所以它们在linux中被称为task,也叫任务) 总结:本章主要包括进程以及线程的概念和定义,Linux内核如何管理每个进程,他们在内核中如何被列举,如何创建 ...

  10. Kubernetes Deployment滚动升级

    我们k8s集群使用的是1.7.7版本的,该版本中官方已经推荐使用Deployment代替Replication Controller(rc)了,Deployment继承了rc的全部功能外,还可以查看升 ...