ng-bind指令AngularJS中的in用来将任何特定HTML元素的文本内容与在给定表达式中输入的值绑定/替换。每当ng-bind指令中表达式的值更改时, 指定的HTML内容的值就会更新。
语法如下：
<element ng-bind="expression"> Contents... </element>其中表达用于指定要求值的表达式或变量。
范例1：本示例使用ng-bind指令将两个数字的乘积绑定到<span>元素。
<!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" >lsbin</ 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 >输出如下：
范例2：本示例使用ng-bind指令将<span>元素的innerHTML绑定到变量文本。
<!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 style = "text-align:center" >
< h1 style = "color:green" >lsbin
< h2 style = "" >ng-bind directive</ h2 >
< div ng-app = "" ng-init = "txt='lsbin';col='green'" >
< div >
< span ng-bind = "txt" ></ span > is the
computer science portal for geeks.
</ div >
</ div >
</ body >
</ html >输出如下：
