关于ngClass的使用

<!DOCTYPE html>
<html ng-app="">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .border{border: 1px solid #ccc;width: 100px;height: 100px;float: left;}
        </style>
        <script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body ng-controller="con">
        <!--
            第一种方式没有什么代表性,不建议使用;第二种通过一个开关控制样式;第三种通过多个开关控制样式
        -->
        <div class={{classname}}>第一种</div>
        <div ng-class="{true: 'border', false: 'inactive'}[off]">第二种</div>
        <div ng-class={'border':true,'red':false}>第三种</div>
    </body>
    <script type="text/javascript">
        var con = function($scope){
            $scope.classname='border';
            $scope.off = true;
        }
    </script>
</html>
阅读更多
个人分类: angularJS
上一篇ngRepeat实现动态添加删除
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭