当前位置: 首页 > news >正文

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

为什么80%的码农都做不了架构师?>>>   hot3.png

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代表类名,值是布尔)设置。

转载于:https://my.oschina.net/tbd/blog/796183

相关文章:

  • Sqoop 产生背景(一)
  • Wamp下Apache2.4.x局域网访问403的解决办法
  • MyBatis 向Sql语句中动态传参数#183;动态SQL拼接
  • zabbix图形中文乱码的问题
  • 业务人员自助BI分析不够用,还要自助数据准备?
  • finnal 评论 II
  • MySQL字符串转日期类型
  • 行业动态
  • 新浪微博客户端(52)-长按或滑动显示表情
  • 基本概念学习(9005)---位段
  • 常用python机器学习库总结
  • 下拉框
  • AOP注解不起作用的debug结果
  • Unity应用架构设计(3)——构建View和ViewModel的生命周期
  • 动态链接库相关
  • __proto__ 和 prototype的关系
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • iOS 系统授权开发
  • Laravel 菜鸟晋级之路
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • MD5加密原理解析及OC版原理实现
  • 分享一个自己写的基于canvas的原生js图片爆炸插件
  • 回流、重绘及其优化
  • 浅谈Golang中select的用法
  • 如何胜任知名企业的商业数据分析师?
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • gunicorn工作原理
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • ​520就是要宠粉,你的心头书我买单
  • !!java web学习笔记(一到五)
  • #{}和${}的区别是什么 -- java面试
  • (1)(1.13) SiK无线电高级配置(六)
  • (7)STL算法之交换赋值
  • (C#)一个最简单的链表类
  • (day 12)JavaScript学习笔记(数组3)
  • (HAL库版)freeRTOS移植STMF103
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (理论篇)httpmoudle和httphandler一览
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (十)T检验-第一部分
  • (数据结构)顺序表的定义
  • (转)德国人的记事本
  • .NET 中创建支持集合初始化器的类型
  • .net对接阿里云CSB服务
  • .Net接口调试与案例
  • .NET设计模式(2):单件模式(Singleton Pattern)
  • .NET中的Exception处理(C#)
  • .net中我喜欢的两种验证码
  • /ThinkPHP/Library/Think/Storage/Driver/File.class.php  LINE: 48
  • [ C++ ] STL_vector -- 迭代器失效问题
  • [ Linux ] git工具的基本使用(仓库的构建,提交)
  • [ 云计算 | AWS ] AI 编程助手新势力 Amazon CodeWhisperer:优势功能及实用技巧
  • [22]. 括号生成
  • [boost]使用boost::function和boost::bind产生的down机一例
  • [C++] cout、wcout无法正常输出中文字符问题的深入调查(1):各种编译器测试