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

来源：互联网发布：淘宝互刷红包群编辑：程序博客网时间：2024/05/29 19:32

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>

0 0