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

最新推荐文章于 2024-06-28 10:40:32 发布

原创最新推荐文章于 2024-06-28 10:40:32 发布 · 1.2w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用AngularJS实现按钮图标状态切换的三种方法：直接修改变量值、使用字符串数组形式处理以及通过对象的key/value进行切换。这些方法能够帮助开发者更灵活地控制UI元素的状态。

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>