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表明類名，值是布爾）設置。