文档章节

Angularjs 数据处理的几个重要方法

透笔度
 透笔度
发布于 2016/11/29 15:34
字数 728
阅读 121
收藏 0

1.控制器显示索引  $index

ng-repeat指令我们使用$index就可以显示我们的索引:

<ul ng-controller="ListCtrl">
  <li ng-repeat="item in items">
    <span>{{$index}}</span>
    <a>{{item.str}}</a>
  </li>
</ul>

 

2.html字符串转为html标签

我们的$scope.projecrDescription设置了要显示的html字符串内容,我们要解析html字符串显示到页面中,我们使用ng-bing-html指令结合过滤器trust2Html:

<div ng-bind-html="projecrDescription | trust2Html"></div>

 

3.字符串截取

我们的$scope.constr设置了要显示的内容,我们直接使用过滤器limitTo(这个只能从0开始裁剪,对比string的裁减方法弱得多):

<div>{{constr | limitTo : 60}}</div>

 

4.ng-class指令

我们的$scope.fun1和$scope.fun1是设置的方法,$scope.val是设置的属性,ng-class指令是否显示类名通过布尔值设置:

<a ng-class="{active:fun1() || fun2()}">资产</a>

当fun1和fun2有一个返回true,a就会设置上active类名。

<a ng-class="{active:fun1() && fun2()}">资产</a>

当fun1和fun2都返回true,a就会设置上active类名。

<a ng-class="{active:val}">资产</a>

当val为true,a就会设置上active类名。

 

标签显示active类名都是表示焦点位置,我们常用作导航焦点显示。

我们结合ui-router的$state,开始时候给全局作用域挂在状态对象:

app.run(
   ['$rootScope','$state',
   function($rootScope,$state) {
        $rootScope.$state = $state;
   }
   ]
)

路由配置,

app.config(['$stateProvider',function($stateProvider){

     $stateProvider
        /*关于我们*/
					.state("about", {
						url: "/about",
						data: {
							pageTitle: '关于我们'
						},
						templateUrl: 'about/about.html'

					})
	/*关于我们-信息*/
					.state('about_mes', {
						url: '/about_mes',
						data: {
							pageTitle: '关于我们'
						},
						templateUrl: 'about/about_mes.html'
					})
	/*关于我们-联系方式*/
					.state('about_phone', {
						url: '/about_phone',
						data: {
							pageTitle: '关于我们'
						},
						templateUrl: 'about/about_phone.html'
					})


}
])

在当前目录时,和出在当前目录子目录时设置active

<a ng-class="{active:
    $state.includes('about')||
    $state.includes('about_mes')||
    $state.includes('about_phone')
}" >
关于我们
</a>

 

5.ng-repeat和ng-class指令

ng-repeat指令我们使用$index就可以显示我们的索引,

我们使用ng-repeat就是循环显示我们的数据,我们经常会遇到下面的特殊数据展示问题:

就是如上截图,中间的数据是通用的样式,不过第一个和最后一个要做特殊样式处理,静态页面的样式设置里面都是如下的:

<ul>

<li class="css01 css-first"></li>
<li class="css01"></li>
<li class="css01"></li>
<li class="css01"></li>
<li class="css01 css-last"></li>

</ul>

利用css的筛选,可以对第一个li和最后一个li进入特殊样式设置,不过这是静态结构,我们对于list数据,都是利用循环的,我们结合ng-repeat+ng+classs进行特殊位置的类名设置:

<ul>

<li ng-class="{'css01':true,'last':$index==data.length-1,'css-last':$index=='0'}" 
ng-repeat="item in data"></li>

</ul>

ng-repeat会拿到记录的索引$index和数据长度,利用ng-class的{}参数(对象类型,key代表类名,值是布尔)设置。

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
166
0
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7K
22
在 Angular 8 中,我们可以期待些什么

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前...

葡萄城技术团队
04/15
376
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
56分钟前
174
4
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
10
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部