AngularJS ng-bind指令用法详细指南 _AngularJS指令

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 >

【AngularJS ng-bind指令用法详细指南】输出如下：

文章图片
范例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 > < bodystyle = "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 >

输出如下：