Narutocc / angular

:hear_no_evil:AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
1 stars 0 forks source link

ng-class && ng-style #17

Open Narutocc opened 6 years ago

Narutocc commented 6 years ago

ng-class

情况一:满足某一判断之后才可以添加class名 三元表达式写法:

ng-class="{'active':paginationNum == pageNum/2+1}"

情况二:页面循环的数据只要第一条数据有特定的class名

<li ng-repeat="item in items" class="list" ng-class="{'active':$index==0}"></li>

如果不使用ng-class,而用class进行逻辑判断,写法为:

<p class="{{bool?'active':''}}"></p>

**ng-class是增加相关样式,可以和class同时使用

ng-style

<p ng-style="{'color':'red','fontSize':'12px'}"></p>

ng-style中出现font-size,background-color...的都必须使用驼峰写法