angularjs中ng-class的使用分析

java哥 阅读:174 2021-09-07 17:40:38 评论:0
本文章主要介绍了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>

标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号