关于微信小程序的文章_详解AngularJS ng

2021-01-11 16:47

详解AngularJS ng-class样式切换       本篇文章主要介绍了详解AngularJS ng-class样式切换,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

1、HTML

 ion-view 
 ion-content 
 div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst" First /div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isSecond]" ng-click="isSecond = !isSecond" Second /div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isThird]" ng-click="isThird = !isThird" Third /div 
 /div 
 br br 
 div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasAll]" ng-click="toggleAll()" All /div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasFirst]" ng-click="toggleFirst()" First /div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasSecond]" ng-click="toggleSecond()" Second /div 
 div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasThird]" ng-click="toggleThird()" Third /div 
 /div 
 /ion-content 
 /ion-view 
 style 
 .bgstyle {background-color: #8f8f8f;width: 100%;height: 20px;margin: 2px 0 2px 0;text-align: center;} 
 .bgstyle-check {background-color: #ff3b30;width: 100%;height: 20px;margin: 2px 0 2px 0;text-align: center;} 
 /style 

2、controller

appControllers.controller('TestlCtrl', function ($scope, $state) { 
 $scope.isFirst = false; 
 $scope.isSecond = false; 
 $scope.isThird = false; 

function checkAll() { if ($scope.hasFirst == true $scope.hasSecond == true $scope.hasThird == true) { console.log("123ok"); $scope.hasAll = true; } else { console.log("123no"); $scope.hasAll = false;

3、效果图

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

 div 
 li ng-repeat="item in rootList" ng-class="{true: 'cur', false: ''}[$index+1===1]" 
 a href="" {{item.CategoryName}} /a 
 /li 
 li a href="" 热门推荐 /a /li 
 li a href="" 热门推荐 /a /li 
 /ul 
 /div 

*、

 ion-item 
 i ng-class="{true: 'icon ion-ti凡科抠图 mr10', false: 'iconfont icon-shangdian text-orange mr10'}[item.VendorId==0]" 
 element ng-show="item.VendorId==0" 合作 /element /i {{item.VendorName}} 
 /ion-item 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888