为什么80%的码农都做不了架构师?>>>
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代表类名,值是布尔)设置。