AngularJS ng-bind 指令

作者 : 慕源网 本文共1327个字,预计阅读时间需要4分钟 发布时间: 2022-05-2 共95人阅读

AngularJS ng-bind 指令,AngularJS 中的ng-bind 指令用于将值与 HTML 元素绑定。每当 ng-bind 指令中表达式的值发生变化时, HTML 内容的值就会更新。

语法:

<element ng-bind="expression"> 内容... </element>

其中expression 用于指定要计算的表达式或变量。

示例 1:使用 ng-bind 指令将两个数字的乘积绑定到 <span> 元素。

<!DOCTYPE html>
<html>
	
<head>
	<title>ng-bind 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>

输出:

AngularJS ng-bind 指令

示例 2:本示例使用 ng-bind 指令将 <span> 元素的 innerHTML 绑定到变量文本。 

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

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

<body style = "text-align:center">
	
	<h1 style = "color:green">GeeksforGeeks
	<h2 style = "">ng-bind directive</h2>
	
	<div ng-app="" ng-init="txt='GeeksforGeeks';col='green'">
		<div>
			<span ng-bind="txt"></span> is the
			computer science portal for geeks.
		</div>
	</div>
</body>

</html>

输出:

AngularJS ng-bind 指令


慕源网 » AngularJS ng-bind 指令

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录