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

2021年3月17日14:49:26 发表评论 769 次浏览

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 >

输出如下:

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

输出如下:

ng-bind

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: