zoukankan html css js c++ java

angularjs中ng-class的使用

1、方法一通过数据的双向绑定(不推荐)

<!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">

<p>选择一个类:</p>

<input type="button" value="天空色" ng-click="clickEvent1()" />
<input type="button" value="番茄色" ng-click="clickEvent2()" />

<div class="{{class1}}">
  <h1>Welcome Home!</h1>
  <p>I like it!</p>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope){
    $scope.clickEvent1 = function() {
        $scope.class1 = "sky";
    }
    $scope.clickEvent2 = function() {
        $scope.class1 = "tomato";
    }    
});
</script>

</body>
</html>

2、方法二对象数组

<!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">

<p>选择一个类:</p>

<input type="button" value="天空色" ng-click="clickEvent1()" />
<input type="button" value="番茄色" ng-click="clickEvent2()" />

<div ng-class="{'class1':'sky','class2':'tomato'}[inputClass]">
  <h1>Welcome Home!</h1>
  <p>I like it!</p>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope){
    $scope.clickEvent1 = function() {
        $scope.inputClass = 'class1';
    }
    $scope.clickEvent2 = function() {
        $scope.inputClass = 'class2';
    }    
});
</script>

</body>
</html>

3、方法三对象key/value

<!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">

<p>选择一个类:</p>

<input type="button" value="天空色" ng-click="clickEvent1()" />
<input type="button" value="番茄色" ng-click="clickEvent2()" />

<div ng-class="{'sky':sky,'tomato':tomato}">
  <h1>Welcome Home!</h1>
  <p>I like it!</p>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope){
    $scope.clickEvent1 = function() {
        $scope.sky = true;
        $scope.tomato = false;
    }
    $scope.clickEvent2 = function() {
        $scope.sky = false;
        $scope.tomato = true;
    }    
});
</script>

</body>
</html>

查看全文

相关阅读:
重置SQLSERVER表的自增列，让自增列重新计数
 【PLM】【PDM】60页PPT终于说清了PDM和PLM的区别；智造时代，PLM系统10大应用趋势！
数据库设计规范
 不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你彻底看清前端MVVM的本质
 SQL数据库日志清理
 1.3、安装MySQL、MySQLdb、Pycharm和其他软件
 1.2.2.3、Django虚拟目录作用以及文件说明
 nginx设置图片防盗链和白名单
 php-5.5.7升级，编译配置方法
 mysql函数CONCAT_WS()比CONCAT()更方便

原文地址：https://www.cnblogs.com/modou/p/5868127.html