详解AngularJS ng-class样式切换

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

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

1、HTML

   
First
Second
Third


All
First
Second
Third

2、controller

 appControllers.controller('TestlCtrl', function ($scope, $state) { $scope.isFirst = false; $scope.isSecond = false; $scope.isThird = false; $scope.hasAll = false; $scope.hasFirst = false; $scope.hasSecond = false; $scope.hasThird = false; $scope.toggleAll = function () { $scope.hasAll = !$scope.hasAll; console.log($scope.hasAll); var dynamicValue = $scope.hasAll; $scope.hasFirst = dynamicValue; $scope.hasSecond = dynamicValue; $scope.hasThird = dynamicValue; } $scope.toggleFirst = function () { $scope.hasFirst = !$scope.hasFirst; checkAll(); } $scope.toggleSecond = function () { $scope.hasSecond = !$scope.hasSecond; checkAll(); } $scope.toggleThird = function () { $scope.hasThird = !$scope.hasThird; checkAll(); } 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、循环列表,判断索引添加样式

*、

   合作{{item.VendorName}} 

以上就是详解AngularJS ng-class样式切换的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读