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>