Angularjs 数据处理的几个重要方法
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',templateUrl: 'about/about_mes.html' }) /*关于我们-联系方式*/ .state('about_phone',{ url: '/about_phone',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代表类名,值是布尔)设置。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |