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.CategoryName}}
        
        
热门推荐
        
热门推荐 
    

*、

    
        合作{{item.VendorName}}