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实战