AngularJS 指令-慕源网

AngularJS 指令，指令是文档对象模型（DOM）中的标记。指令可以与控制器或HTML标记一起使用，AngularJS 通过指令来扩展 HTML。有一些指令是自定义的，使用自定义指令来创建自己的组件。下表列出了重要的内置AngularJS指令。

指令	描述
ng-app	AngularJS 应用程序的启动。
ng-init	用于初始化变量
ng-model	ng-model 用于绑定到 HTML 控件
ng-controller	将控制器附加到视图
ng-bind	将值与 HTML 元素绑定
ng-repeat	ng-repeat 指令会重复一个 HTML 元素：
ng-show	显示或隐藏关联的 HTML 元素
ng-readonly	使 HTML 元素只读
ng-disabled	用于动态禁用或启用按钮
ng-if	删除或重新创建 HTML 元素
ng-click	ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。

ng-app：
AngularJS 中的ng-app 指令用于定义 AngularJS 应用程序的根元素。该指令在页面加载时自动初始化 AngularJS 应用程序。它可用于在 AngularJS 应用程序中加载各种模块。
示例：此示例使用 ng-app 指令来定义默认的 AngularJS 应用程序。

<html>
		
<head>
	<title>AngularJS ng-app Directive</title>
	
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>
	
<body style="text-align:center">
		
	<h2 style = "color:green">ng-app directive</h2>
		
	<div ng-app="" ng-init="name='GeeksforGeeks'">
		<p>{{ name }} is the portal for geeks.</p>
	</div>
</body>
	
</html>

输出：

ng-init：
ng-init 指令用于初始化 AngularJS 应用程序数据。它定义了 AngularJS 应用程序的初始值并将值分配给变量。
ng-init 指令为 AngularJS 应用程序定义初始值和变量。
示例：初始化一个字符串数组。

<html>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
	angular.min.js"></script>
	<head>
		<title>AngularJS ng-init Directive</title>
	</head>
	<body>
			<h1 style = "color:green">GeeksforGeeks
			<h2>ng-init directive</h2>
			<div ng-app="" ng-init="sort=['quick sort', 'merge sort',
			'bubble sort']">
			Sorting techniques:
			<ul>
			<li>{{ sort[0] }} </li>
			<li>{{ sort[1] }} </li>
			<li>{{ sort[2] }} </li>
			</ul>
		</div>
	</body>
</html>

输出：

ng-model：
ng-model指令可以将输入框的值与angular创建的变量所绑定。
它还用于表单的验证期间。
例子：

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
	.column {
		float: left;
		text-align: left;
		width: 49%;
	}
	
	.row {
		content: "";
		display: table;
	}
</style>

<body ng-app="myApp"
	ng-controller="myController">
	<h4>Input Box-</h4>
	<div class="row">
		<div class="column">
			Name-
			<input type="text"
				ng-model="name">
			<pre> {{ name }} </pre> Checkbox-
			<input type="checkbox"
				ng-model="check">
			<pre> {{ check }} </pre> Radiobox-
			<input type="radio"
				ng-model="choice">
			<pre> {{ choice }} </pre> Number-
			<input type="number"
				ng-model="num">
			<pre> {{ num }} </pre> Email-
			<input type="email"
				ng-model="mail">
			<pre> {{ mail }} </pre> Url-
			<input type="url"
				ng-model="url">
			<pre> {{ url }} </pre>
		</div>
		<div class="column">
			Date:
			<input type="date" ng-model="date1" (change)="log(date1)">
			<pre> Todays date:{{ date1+1 }}</pre> Datetime-local-
			<input type="datetime-local" ng-model="date2">
			<pre> {{ date2+1 }} </pre> Time-
			<input type="time" ng-model="time1">
			<pre> {{ time1+1 }} </pre> Month-
			<input type="month" ng-model="mon">
			<pre> {{ mon+1 }} </pre> Week-
			<input type="week" ng-model="we">
			<pre> {{ we+1 }} </pre>
		</div>
	</div>
</body>
<script>
	var app = angular.module('myApp', []);
	app.controller('myController', function($scope) {
		$scope.name = "Hello Geeks!";
		$scope.check = "";
		$scope.rad = "";
		$scope.num = "";
		$scope.mail = "";
		$scope.url = "";
		$scope.date1 = "";
		$scope.date2 = "";
		$scope.time1 = "";
		$scope.mon = "";
		$scope.we = "";
		$scope.choice = "";
		$scope.c = function() {
		$scope.choice = true;
		};
	});
</script>

</html>

输出：

ng-controller：
AngularJS 中的 ng-controller 指令用于向应用程序添加控制器。它可用于添加可在某些事件（如单击等）上调用以执行某些操作的方法、函数和变量。
例子：

<!DOCTYPE html>
<html>

<head>
	<title>ng-controller Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
	</script>
</head>

<body ng-app="app" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-controller Directive</h2><br>
	
	<div ng-controller="geek">
		Name: <input class="form-control" type="text"
				ng-model="name">
		<br><br>
		
		You entered: <b><span>{{name}}</span></b>
	</div>
	
	<script>
		var app = angular.module('app', []);
		app.controller('geek', function ($scope) {
			$scope.name = "geeksforgeeks";
		});
	</script>
</body>

</html>

输出：

ng-bind：
ng-bind 指令告诉 AngularJS 使用变量或表达式的值来替换 HTML 元素的内容。如果变量或表达式修改了，指定替换的 HTML 元素也会修改。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-checked Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body ng-app="gfg" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-bind Directive</h2>		
	
	<div ng-controller="app">
		num1: <input type="number" ng-model="num1"
				ng-change="product()" />
		<br><br>
		
		num2: <input type="number" ng-model="num2"
				ng-change="product()" />
		<br><br>
		
		<b>Product:</b> <span ng-bind="result"></span>
	</div>
	
	<script>
		var app = angular.module("gfg", []);
		app.controller('app', ['$scope', function ($app) {
			$app.num1 = 1;
			$app.num2 = 1;
			$app.product = function () {
				$app.result = ($app.num1 * $app.num2);
			}
		}]);
	</script>
</body>

</html>

ng-repeat：
Angular-JS ng-repeat 指令可以将一组 HTML 代码重复多次或在项目集合中的每个项目重复一次。ng-repeat 主要用于数组和对象。
ng-repeat 类似于我们在 C、C++ 或其他语言中的循环，但从技术上讲，它为我们正在访问的集合中的每个元素实例化一个模板（通常是一组 HTML 结构）。Angular 维护一个 $index 变量作为当前正在访问的元素的键，用户也可以访问这个变量。

例子：

为应用程序创建一个 app.js 文件。

var app = angular.module('myApp',[]);

app.controller('MainCtrl', function($scope){
	$scope.names = ['Adam','Steve','George','James','Armin'];
	console.log($scope.names);
});

创建 index.html 页面，使用 ng-repeat 指令一次从名称数组中获取一个名称并显示它

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<title>Angular ng-repeat</title>
	<script> type="text/javascript" src="jquery-3.2.1.min.js">
	</script>
	<script> type="text/javascript" src="angular.js"></script>
	<script> type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
	<h2>Here is the name list</h2>
	<ul>
		<li ng-repeat="name in names">
			{{name}}
		</li>
	</ul>
</body>
</html>

输出：

ng-show：
AngluarJS 中的 ng-show 指令用于显示或隐藏指定的 HTML 元素。如果 ng-show 属性中的给定表达式为true，则 HTML 元素将显示，否则将隐藏 HTML 元素。所有 HTML 元素都支持它。
示例 1：使用 ng-show 指令在选中复选框后显示 HTML 元素。

<!DOCTYPE html>
<html>

<head>
	<title>ng-show Directive</title>
	
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body>
	<div ng-app="app" ng-controller="geek">
		
		<h1 style="color:green">GeeksforGeeks</h1>
		<h2>ng-show Directive</h2>
		
		<input id="chshow" type="checkbox" ng-model="show" />
		
		<label for="chshow">
			Show Paragraph
		</label>
		
		<p ng-show="show" style="background: green; color: white;
				font-size: 14px; width:35%; padding: 10px;">
			Show this paragraph using ng-show
		</p>
	</div>
	
	<script>
		var myapp = angular.module("app", []);
		myapp.controller("geek", function ($scope) {
			$scope.show = false;
		});
	</script>
</body>

</html>

输出：

选中复选框之前：

选中复选框后：

ng-readonly：
AngularJS 中的 ng-readonly 指令用于指定 HTML 元素的只读属性。仅当 ng-readonly 指令中的表达式返回 true 时，HTML 元素才会是只读的。
示例：使用 ng-readonly 指令来启用只读属性。

<!DOCTYPE html>
<html>
	<head>
		<title>ng-readonly Directive</title>
		
		<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
		</script>
	</head>
	
	<body ng-app style="text-align:center">
		<h1 style="color:green">GeeksforGeeks</h1>
		<h2>ng-readonly Directive</h2>
		
		<div>
			<label>Check to make month readonly: <input type="checkbox"
			ng-model="open"></label>
			
			<br><br>
			
			Input Month:<input ng-readonly="open" type="month"
					ng-model="month">
		</div>
	</body>
</html>

输出：

选中复选框之前：

选中复选框后：

ng-disabled：
AngularJS 中的 ng-disabled 指令用于启用或禁用 HTML 元素。如果 ng-disabled 属性中的表达式返回 true，则表单字段将被禁用，反之亦然。它通常应用于表单域（输入、选择、按钮等）。
示例 1：使用 ng-disabled 指令来禁用按钮。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-disabled Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body ng-app="app" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	
	<h2>ng-disabled Directive</h2>
	
	<div ng-controller="app" ng-init="disable=false">
		<button ng-click="geek(disable)" ng-disabled="disable">
			Click to Disable
		</button>
		
		<button ng-click="geek(disable)" ng-show="disable">
			Click to Enable
		</button>
	</div>
	
	<script>
		var app = angular.module("app", []);
		app.controller('app', ['$scope', function ($app) {
			$app.geek = function (disable) {
				$app.disable = !disable;
			}
		}]);
	</script>
</body>

</html>

输出：

点击按钮前：

点击按钮后：

ng-if：
AngularJS 中的 ng-if 指令用于根据表达式删除或重新创建 HTML 元素。ng-if 与 ng-hide 不同，因为它完全移除了 DOM 中的元素，而不仅仅是隐藏元素的显示。如果其中的表达式为false，则删除元素，如果为true，则将元素添加到 DOM。
示例：在单击按钮后更改内容。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-hide Directive</title>
	
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body ng-app="geek" style="text-align:center">
	
	<h1 style="color:green">
		GeeksforGeeks
	</h1>
	
	<h2>ng-if Directive</h2>
	
	<div ng-controller="app as vm">
		<div ng-if="!vm.IsShow">
			<input type="button" class="btn btn-primary"
					ng-click="vm.IsShow=!vm.IsShow"
					value="Sign in">
					
			<p>Click to Sign in</p>
		</div>
		
		<div ng-if="vm.IsShow">
			<button class="btn btn-primary"
			ng-click="vm.IsShow=!vm.IsShow">
				Sign out
			</button>
			
			<p>
				GeeksforGeeks is the computer
				science portal for geeks.
			</p>
		</div>
	</div>
	
	<script>
		var app = angular.module("geek", []);
		app.controller('app', ['$scope', function ($scope) {
			var vm = this;
		}]);
	</script>
</body>

</html>

输出：

点击按钮前：

点击按钮后：

ng-click：
ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
示例：使用 ng-click 指令在单击元素后显示警告消息。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-click Directive</title>

	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
	</script>
</head>

<body ng-app="geek" style="text-align:center">
	
	<h1 style="color:green">GeeksforGeeks</h1>
	<h2>ng-click Directive</h2>
	
	<div ng-controller="app">
		<button>
			<a href="" ng-click="alert()">
				Click Here
			</a>
		</button>
	</div>
	
	<script>
		var app = angular.module("geek", []);
		app.controller('app', ['$scope', function ($app) {
			$app.alert = function () {
				alert("This is an example of ng-click");
			}
		}]);
	</script>
</body>

</html>

输出：

点击按钮前：

点击按钮后：

AngularJS 指令

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复