angular修改标签css修改的三种方法

最新推荐文章于 2020-08-06 22:09:52 发布

luzhaopeng19940312

最新推荐文章于 2020-08-06 22:09:52 发布

阅读量1.2w

点赞数 2

分类专栏： Angular

本文链接：https://blog.csdn.net/u011740841/article/details/47727011

版权

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1：scope变量绑定

<div ng-app="index_app" ng-controller="index_controller">
	<button class="btn btn-default btn-lg" type="submit" ng-click="change_play_status3()">
		<span class="glyphicon {{play_status}}" aria-hidden="true"></span>
	</button>
</div>
<script>
	var index_app = angular.module('index_app', []);
	index_app.controller("index_controller",function($scope){
		$scope.play_status = "glyphicon-play";
		$scope.change_play_status3 =function(){
			if($scope.play_status == "glyphicon-play"){
				$scope.play_status = "glyphicon-pause"
			}else if($scope.play_status == "glyphicon-pause"){
				$scope.play_status = "glyphicon-play"
			}
		};
	});
</script>

2：字符串数组形式

<div ng-app="index_app" ng-controller="index_controller">	
	<button class="btn btn-default btn-lg" type="submit" ng-click="change_play_status()">
		<span class="glyphicon" ng-class="{true:'glyphicon-play',false:'glyphicon-pause'}[isPlay]" aria-hidden="true"></span>
	</button>
</div>
<script>	
	var index_app = angular.module('index_app', []);
	index_app.controller("index_controller",function($scope){
		$scope.isPlay = false;
		$scope.change_play_status = function(){
			$scope.isPlay = !$scope.isPlay;
		};
	});
</script>

3：对象key/value处理

<div ng-app="index_app" ng-controller="index_controller">
	<button class="btn btn-default btn-lg" type="submit" ng-click="change_play_status2()">
		<span class="glyphicon" ng-class="{'glyphicon-play':isPlay2,'glyphicon-pause':isPause2}" aria-hidden="true"></span>
	</button>
</div>
<script>	
	var index_app = angular.module('index_app', []);
	index_app.controller("index_controller",function($scope){
		$scope.isPlay2 = false;
		$scope.isPause2 = true;
		$scope.change_play_status2 =function(){
			$scope.isPlay2 = !$scope.isPlay2;
			$scope.isPause2 = !$scope.isPause2;
		};
	});
</script>