AngularJS之默认样式

先解释一下题目是个什么意思。
举个栗子：
页面上一组tab页，加载页面的时候肯定会把第一个tab页设置为激活(active)的状态。那么，在jQuery下的写法肯定就是

<script>    $(function(){        $('ul li').eq(0).addClass('active');    });</script>

在这我tab是用的 bootstrap的nav-tabs.

但是用了 AngularJS 以后，我的tab页是通过动态获取json拼出来的。具体代码如下：
html：

<div ng-controller="menuCtrl">        <ul class="nav nav-tabs" id="menus">            <li ng-repeat="menu in menus" >                <a href="javascript:void(0)"                   ng-click="changeLink($event)"                   data-toggle="tab"                   data-url="{{menu.url}}">                    {{menu.title}}                </a>            </li>        </ul>        <div ng-include="url"></div>    </div>

controller：

angular.module('angularJSApp',[])    .controller('menuCtrl',function($scope,$http,$element){        $http.get('json/nav.json').success(function(result){            $scope.menus = result;            $scope.url = result[0].url;        });        $scope.changeLink = function(event){            $scope.url = $(event.target).attr('data-url');        };    });

看html代码可以看出来，我的页面是通过ng-repaet循环遍历出来的，并不是写死的。这个时候你再用jQuery获取ul，获取ul的子节点的时候就获取不到了，当然addClass肯定也就添加不上。这个时候就需要用到了，AngularJS的一个指令ng-class 添加样式。写法如下：

ng-class="{'active':$index === 0}"

{}里边的写法实际上类似于一个if判断。对于我当前的这个例子来说。就是获取当前li的索引index判断当前的index是否是0。如果是0 就说明当前的这个li就是第一个。这个时候满足条件，就会把指定的类添加到当前li上。

ng-class="{'yourClassName':$index === 0}"

未完待续….后续涉及到 ng-class 继续回来补充