Angular js 之一些简单的js操作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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操作的主要内容,如果未能解决你的问题,请参考以下文章

我们为什么以及是如何从 Angular.js 迁移到 Vue.js?

angularJS简单掉用接口,实现数组页面打印

Angular JS路由不起作用

使用 http 时,req.body 为空 。在 angular 和 node.js 中发布

十个由浅入深的Angular.js面试问题

2019年React.js开发者路线图