AngularJS 學習筆記——指令

時間 2019-12-08

標籤 angularjs 學習筆記指令欄目 AngularJS 简体版

原文原文鏈接

1、ng-clickcss

ng-click 指令告訴了 AngularJS HTML 元素被點擊後須要執行的操做。html

<element ng-click="expression"></element>express

expression

元素被點擊後執行的表達式。

1.點擊顯示，再點擊隱藏數組

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div ng-controller='DeathrayMenuController'>
        <button ng-click='toggleMenu()'>Toggle Menu</button>
        <ul ng-show='menuState'>
            <li>Stun</li>
            <li>Disintegrate</li>
            <li>Erase from history</li>
        </ul>
    <div/>
</body>

<script src="js/angular-1.3.0.js"></script>
<script>
var myCSSModule = angular.module('MyCSSModule',[]);
myCSSModule.controller('DeathrayMenuController',['$scope',
	function($scope) {
		$scope.menuState=false;
		$scope.toggleMenu = function() {
			$scope.menuState = !$scope.menuState;
		};
	}
])
</script>

</html>

2、ng-classapp

ng-class 指令用於給 HTML 元素動態綁定一個或多個 CSS 類。ide

ng-class 指令的值能夠是字符串，對象，或一個數組。學習

若是是字符串，多個類名使用空格分隔。spa

若是是對象，須要使用 key-value 對，key 爲你想要添加的類名，value 是一個布爾值。只有在 value 爲 true 時類纔會被添加。.net

若是是數組，能夠由字符串或對象組合組成，數組的元素能夠是字符串或對象。code

<element ng-class="expression"></element>

expression

表達式返回一個或多個類名。

2.點擊不一樣的按鈕顯示不一樣的內容

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <style type="text/css">
    .error {
    background-color: red;
    }
    .warning {
        background-color: yellow;
    }
    </style>
</head>

<body>
    <div ng-controller='DeathrayMenuController'>
        <div ng-class="{error: isError, warning: isWarning}">{{messageText}}</div>
        <button ng-click='showError()'>Simulate Error</button>
        <button ng-click='showWarning()'>Simulate Warning</button>
    </div>

</body>

<script src="js/angular-1.3.0.js"></script>
<script>
var myCSSModule = angular.module('MyCSSModule',[]);
myCSSModule.controller('DeathrayMenuController',['$scope',
	function($scope) {
		$scope.isError = false;
		$scope.isWarning = false;
		$scope.showError = function() {
			$scope.messageText = 'This is an error!';
			$scope.isError = true;
			$scope.isWarning = false;
		};
		$scope.showWarning = function() {
			$scope.messageText = 'Just a warning. Please carry on.';
			$scope.isWarning = true;
			$scope.isError = false;
		};
	}
])
</script>

</html>

3.點擊按鈕添加class並隱藏另外一個div

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <style type="text/css">
    .bck {
    background-color: red;
    }
    .navshow {
        background-color: yellow;
    }
    .sh_left{
        background-color: #00ced1;
    }
    .arrow-down{
        background-color: #ff6eb4;
    }
    .hide {
        background-color: #f08080;
    }
    </style>
</head>

<body>
    <div ng-controller='DeathrayMenuController'>
        <div class="aniu" ng-click="Digest_show()"  >
            <span ng-class="{'sh_left' : Digest, 'sh_left arrow-down' : !Digest}">按鈕</span>
        </div>
        <div class="bck" ng-class="{navshow : Digest}">
            背景顏色變化
        </div>
        <div class="hide" ng-if="!Digest">
            按鈕點擊隱藏
        </div>
    </div>

</body>

<script src="js/angular-1.3.0.js"></script>
<script>
var myCSSModule = angular.module('MyCSSModule',[]);
myCSSModule.controller('DeathrayMenuController',['$scope',function($scope){
	$scope.Digest_show = function() {
        $scope.Digest = !$scope.Digest;
    };
}])
</script>

</html>

自定義指令：AngularJS 學習筆記——自定義指令

參考資料：AngularJS實戰