zoukankan      html  css  js  c++  java
  • angular之隐藏显示,CSS类和样式

    直接上代码

    <body ng-app='app'>

    <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;
    }
    })

    css

    .color-true{
    color: red;
    }
    .color-false{
    color:#000000;
    }
    .error{
    color: red;
    }
    .warning{
    color: yellow;
    }

  • 相关阅读:
    hdu 4768 Flyer 二分
    hdu 4767 Bell
    hdu 4759 Poker Shuffle 二进制
    uva 12589
    zoj 3057 Beans Game 博弈论
    poj 2480 Longge's problem 积性函数
    重新启程
    【Luogu P1502】 窗口的星星
    【BZOJ1855】[Scoi2010] 股票交易
    【BZOJ1122】[POI2008] 账本BBB
  • 原文地址:https://www.cnblogs.com/Eplayed/p/5431077.html
Copyright © 2011-2022 走看看