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',
						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表明类名，值是布尔）设置。