整理文档，搜刮出一个详解AngularJS ng级样式切换，稍微整理精简一下做下分享。

1、超文本标记语言

ion-view ion-content div class=' button-bar ' div ng-class=' { true : ' bgstyle-check '，false : ' bgstyle ' }[IsFirst]' ng-click=' IsFirst=！是第一个' first/div div ng-class=' { true : ' bgstyle-check '，false : ' bgstyle ' }[是第二个]' ng-click='是第二个=！是第二个' second/div ng-class=' { true : ' bgstyle-check '，false : ' bgstyle ' }[is ird]' ng-click=' is ird=！Third是' Third/div/div brbr div class=' button-bar ' div-class=' { true : ' bgstyle-check '，fall : ' bgstyle ' }[hasAll]' ng-click=' toggleAll()' All/div ng-class=' { true : ' bgstyle-check '，fall : ' bgstyle ' }[hasFirst]ng-click=' toggleFirst()' First/div-class=' { true : ' bgstyle宽度： 100%;高： 20pxmargin: 2px 0 2px 0文本对齐：中心；} .BG风格-检查{底色： # ff3b 30宽度： 100%;高： 20pxmargin: 2px 0 2px 0文本对齐：中心；}/样式2、控制器

appcontrollers。控制器(' TestlCtrl '，函数($scope，$ state){ $ scope。isfirst=false$ scope.isSecond=false$ scope。是第三=假；$ scope . hasall=false $ scope . hasfirst=false $ scope . hassecond=false $ scope . hasthird=false $ scope。toggleall=function(){ $ scope。hasall=！$ scope.hasAllconsole。日志($ scope)。hasall)；var dynamic value=$ scope . hasall $ scope。has first=动态值；$ scope . hassecond=dynamic value $ scope . hasthird=dynamic value } $ scope。togglefirst=function(){ $ scope。hasfirst=！$ scope . hasfirst checkall()；} $ scope。切换second=function(){ $ scope。hassecond=！$ scope . hassecondcheckall()；} $ scope。togglethird=function(){ $ scope。hasthird=！$ scope . hasthirdcheckall()；}函数checkAll(){ if($ scope)。hasfirst==true $ scope。hassecond==true $ scope。hasthird==true){ console。日志(' 123 ok ')；$ scope . hasall=true } else { console。日志(' 123 no ')；$ scope.hasAll=false} } }) 3、效果图

4、循环列表，判断索引添加样式

div class=' category-tab ' ul Li ng-repeat=' root list ' ng-class=' { true : ' cur '，false : ' ' }[$ index 1===1]' a href=' ' { { item } .CategoryName}}/a /li lia href=' '热门推荐/a/li lia href=' '热门推荐/a /li /ul /div *，

ion-item class=' item-divider ' I ng-class=' { true : ' icon ion-tips mr10 '，false : ' icon font icon-Shang Dian text-orange mr10 ' }[item .VendorId==0]元素ng-show='item .VendorId==0 '合作/element/I { { item } .VendorName}} /ion-item以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。