La directiva ng-bind en AngularJS se usa para vincular/reemplazar el contenido de texto de cualquier elemento HTML en particular con el valor que se ingresa en la expresión dada. El valor del contenido HTML especificado se actualiza cada vez que el valor de la expresión cambia en la directiva ng-bind.
Sintaxis:
<element ng-bind="expression"> Contents... </element>
Donde expresión se usa para especificar la expresión a evaluar o la variable.
Ejemplo 1: este ejemplo utiliza la directiva ng-bind para vincular el producto de dos números al elemento <span>.
html
<!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>
Producción:
Ejemplo 2: este ejemplo utiliza la directiva ng-bind para vincular el HTML interno del elemento <span> al texto variable.
html
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA