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>

时间: 2024-10-11 22:18:03

Angular js 之一些简单的js操作的相关文章

Epii.js 一个极其简单的Js模板引擎

Epii.js 简约而不简单的JavaScript模板引擎 项目地址 https://github.com/epaii/epii.js 极低门槛,拿来即用,别忘记star 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑定和处理,不依赖任何第三方库,仅仅8k. 可快速应用于web开发,native+webapp开发,h5微网页开发,不与其它框架冲突. 让开发者更多关注与应用本身,而不用花费大量时间实现数据与ui的,和事件处理.效率大幅度提升. 名字由来

使用node.js,实现简单的JS合并小工具

最近在学node.js,之前由于实验室项目需要,用C#写了个JS代码压缩合并的小插件,想想正好可以用node重构,来练练手.本人node新手,大神止步O(∩_∩)O 上代码: /*符合CommonJs规范*/ var writePath = 'min.js',/*默认输出到本目录min.js文件里*/ fs = require('fs'), r1 = /^(.+)$/mg,/*分行*/ r2 = /\s{2,}/g,/*去空格*/ r3 = /([^\\])\/\/.*/g,/*去行注释*/ r

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

本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.svg 操作页面上的 svg 元素做动画. 我粗略的看了下, snap.svg 的实现似乎并没有遵从什么模块规范,就是常见的提供几个全局变量完事.如果真的耿直的在 Component 中去用的话,会在执行 tsc 编译成 js 文件这一过程中报错. 这是因为 TypeScript 编译器并不知道 sna

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

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

JS代码的简单重构与优化

JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) { return true; } else { return false; } //good return age > 20; 这种一看就明白吧,没什么说的. Demo . 2 //bad for (var i = 0; i < arr.length; i++) { //do something

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

1     Javascript回顾 问题:Javascript能做什么? 1. 获取操作dom <style> .aa{ background:red} .bb{ background:blue} </style> <body> <div id="dv" title="提示信息" class="aa">AAAAAAAAA</div> <button onclick="f

JaveScript简单数据类型(JS知识点归纳二)

JS中的简单数据类型有五种 : --> string --> number -->boolean --> null -->undefined 数据类型的检测 :typeof 语法: typeof 数据:    typeof ( 数据 ) : 1 typeof 100; //结果为number 使用typeof获取的数据类型名是字符串类型 1 var num = 100; 2 var result = typeof num;//result此时保存的是变量str中数据的类型名

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步:  通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt

简单的JS框架

一 Yui-ext 基于Yahoo UI的扩展包yui-ext是具有cs风格的web用户界面组件,能实现复杂的Layou布局,界面效果可以和backbase比美,而且使用纯JavaScript代码开发.真正的可编辑的表格edit Grid,支持XML和Json数据类型.许多组件实现了对数据源的支持,如动态布局,动态加载Tree控件,动态拖拽效果等等.从1..0beta版开始同jQuery合作,推出基于jQuery的ext1.0,提供了更多有趣的功能. 优点:结构化,清晰明了,底层用到了jQuer