angular之隐藏显示，CSS类和样式

最新推荐文章于 2022-06-17 15:42:31 发布

weixin_30950607

最新推荐文章于 2022-06-17 15:42:31 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Eplayed/p/5431077.html

版权

直接上代码

<div ng-controller="showHideController">
<button ng-click="show()">按钮</button>
<ul ng-show="isShow" class="color-{{isDis}}">
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>

</div>

<div ng-controller="cssController">
<div ng-class="{error:isError,warning:isWarning}">{{msgText}}信息</div>
<button ng-click="showError()">error</button>
<button ng-click="showWarn()">waring</button>
</div>

</body>

angular.module('app',[])

.controller('showHideController',function($scope){
$scope.isShow=false;
$scope.isDis=false;
$scope.show = function(){
$scope.isShow=!$scope.isShow
$scope.isDis=!$scope.isDis
}
})
.controller('cssController',function($scope){
$scope.isError=false;
$scope.isWarning = false;
$scope.showError = function(){
$scope.msgText="this is error!!"
$scope.isError=true;
$scope.isWarning = false;
}
$scope.showWarn = function(){
$scope.msgText="this is warn!!"
$scope.isError=false;
$scope.isWarning = true;
}
})