angularjs ng-class控制li的样式

被点击时更换样式，点击下一个时恢复默认样式

写得比较简单：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        .sky {
            color: white;
            background-color: lightblue;
            padding: 20px;
        }
        
        .tomato {
            background-color: coral;
            padding: 40px;
        }
    </style>
</head>

<body ng-controller="ctrl">
    <ul>
        <li ng-click='li_click(1)' ng-class='{tomato: 1 == focus,sky: 1 !== focus}'>1</li>
        <li ng-click='li_click(2)' ng-class='{tomato: 2 == focus,sky: 2 !== focus}'>2</li>
        <li ng-click='li_click(3)' ng-class='{tomato: 3 == focus,sky: 3 !== focus}'>3</li>
    </ul>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        myApp.controller('ctrl', function($scope) {
            $scope.li_click = function(i) {
                $scope.focus = i;
            };

        });
    </script>

</body>

</html>

angularjs ng-class控制li的样式

相关推荐