En este artículo, veremos las expresiones en Angular JS, además de conocer los diferentes métodos para implementarlo a través de los ejemplos de código.
Las expresiones en AngularJS son las declaraciones que se van a evaluar, que se colocan dentro de las llaves dobles. El resultado de la evaluación se devolverá exactamente donde se define la expresión. Ayuda a realizar el enlace de datos. El enlace de datos se refiere a la sincronización entre el modelo y los componentes de la vista. Las expresiones ayudan en la vinculación de datos, ya que vinculan los datos de la aplicación a HTML. Un punto importante a tener en cuenta aquí es que las expresiones AngularJS no pueden contener expresiones regulares, bucles, declaraciones condicionales y funciones. Las expresiones en AngularJS pueden contener literales, operadores y variables. Las expresiones de AngularJS se pueden usar con tipos primitivos como strings y números y otros tipos como objetos y arrays de JavaScript.
Hay 2 métodos para escribir expresiones en AngularJS:
- Usando las llaves dobles
- Usando la directiva ng-bind
Exploraremos ambos métodos y conoceremos su implementación.
Uso de llaves dobles: las llaves dobles se pueden usar para mostrar el contenido del modelo en el componente de vista. Lo que esté escrito dentro de llaves dobles, se mostrará exactamente en el lugar donde se coloca la expresión.
Sintaxis:
{{expression}}
Ejemplo 1 : este ejemplo describe las expresiones.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<p>{{100}}</p>
<p>{{100*2}}</p>
</body>
</html>
Producción:
Ejemplo 2 : este ejemplo describe las expresiones usando llaves dobles.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<form>
<label>Enter your name:</label>
<input type="text" ng-model="name">
</form>
<p>Hello {{name}}</p>
</body>
</html>
Explicación: En este ejemplo, hemos tomado el nombre como entrada. Luego hemos impreso el mensaje que contiene el nombre que el usuario ingresó usando la expresión escrita entre llaves dobles.
Producción:
Uso de la directiva ng-bind : la directiva ng-bind puede ser útil para vincular el HTML interno de un elemento a una propiedad del modelo. Si el valor de una variable o expresión cambia, el contenido del elemento HTML especificado también cambiará.
Sintaxis:
<element ng-bind="expression"> Contents </element>
Ejemplo 3: este ejemplo describe las expresiones usando la directiva ng-bind.
HTML
<!DOCTYPE html> <html> <head> <title>Angular JS Expression</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app=""> <form> <label>Enter your name:</label> <input type="text" ng-model="name"> </form> <p>Hello <span ng-bind="name"></span> </p> </body> </html>
Explicación: En este ejemplo, hemos tomado el nombre como entrada. Usando la directiva ng-model , podemos vincular el valor de la entrada a los datos de la aplicación. Luego hemos impreso el nombre que el usuario ingresó usando la directiva ng-bind .
Producción:
Realización de operaciones dentro de expresiones:
También podemos realizar expresiones dentro de una expresión.
Ejemplo 4 : Este ejemplo describe la concatenación de 2 strings.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<form>
<label>Enter your first name:</label>
<input type="text" ng-model="firstname">
<br><br>
<label>Enter your last name:</label>
<input type="text" ng-model="lastname">
</form>
<p>Hello {{firstname+" "+lastname}}</p>
</body>
</html>
Producción:
Ejemplo 5: En este ejemplo estamos calculando el monto total a pagar de acuerdo a la cantidad de los productos ingresados por el cliente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body ng-app="myApp"
ng-controller="myctrl">
<form>
<label>
Enter the quantity of
items to be bought:
</label>
<br>
<br>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Pencil</td>
<td>10</td>
<td>
<input type="number"
ng-model="pencil"
min=0 value="0">
</td>
</tr>
<tr>
<td>Pen</td>
<td>20</td>
<td>
<input type="number"
ng-model="pen"
min=0 value="0">
</td>
</tr>
<tr>
<td>Sharpner</td>
<td>15</td>
<td>
<input type="number"
ng-model="sharpner"
min=0 value="0">
</td>
</tr>
<tr>
<td>Eraser</td>
<td>5</td>
<td>
<input type="number"
ng-model="eraser"
min=0 value="0">
</td>
</tr>
</table>
<p>Total amount to be paid:
{{pencil*10+pen*20+sharpner*15+eraser*5}}
</p>
</form>
<script>
var app = angular.module("myApp", []);
app.controller("myctrl", function($scope) {
$scope.pencil = 0;
$scope.pen = 0;
$scope.sharpner = 0;
$scope.eraser = 0;
});
</script>
</body>
</html>
Explicación: En este ejemplo, se muestra una tabla que muestra detalles como el nombre y el precio del producto. El usuario debe ingresar la cantidad que desea comprar y se muestra el monto a pagar.
Salida :
Nota : Las operaciones realizadas para el cálculo del monto total a pagar están dentro de la expresión:
{{ pencil*10 + pen*20 + sharpner*15 + eraser*5 }}
Ejemplo 6 : este ejemplo describe la expresión en Angular JS especificando el número, string, array, objeto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myctrl">
<p>Name of the student: {{student.name}}</p>
<p>Age of the student: {{student.age}}</p>
<p>Favourite subject: {{subjects[0]}}</p>
<p>Least favourite: {{subjects[1]}}</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myctrl", function($scope) {
$scope.student = {
"name": "GeeksforGeeks",
age: 20
};
$scope.subjects =
["English", "Hindi",
"Maths", "SST", "Science"];
});
</script>
</body>
</html>
Producción:
Existe una similitud entre las expresiones AngularJS y JavaScript , es decir, ambas pueden contener literales, operadores y variables.
Comparación entre expresiones AngularJS y Javascript:
Expresiones de AngularJS |
Expresiones JavaScript |
|---|---|
|
Estos se pueden escribir dentro de HTML. |
Estos no se pueden escribir dentro de HTML. |
|
Estas expresiones admiten filtros. |
Estas expresiones no admiten filtros. |
|
No admiten condicionales, bucles ni excepciones. |
Los condicionales, los bucles y las excepciones son compatibles con ellos. |
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA