suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Ausdrucksverwendung in AngularJS_AngularJS

Detaillierte Erläuterung der Ausdrucksverwendung in AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:41938Durchsuche

Ausdrücke werden für die Bindung von Anwendungsdaten an HTML verwendet. Ausdrücke werden in doppelten Klammern wie {{Ausdruck}} geschrieben. Das Verhalten in Ausdrücken ist das gleiche wie bei der ng-bind-Direktive. AngularJS-Anwendungsausdrücke sind reine Javascript-Ausdrücke und geben die darin verwendeten Daten aus.
Verwenden Sie Zahlen

<p>Expense on Books : {{cost * quantity}} Rs</p>

Verwenden Sie die Zeichenfolge 

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

Objekt verwenden

<p>Roll No: {{student.rollno}}</p>

Verwenden Sie ein Array

<p>Marks(Math): {{marks[3]}}</p>

Beispiel

Das folgende Beispiel veranschaulicht alle oben genannten Ausdrücke.
Der Dateicode testAngularJS.html lautet wie folgt: 

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
  <p>Hello {{student.firstname + " " + student.lastname}}!</p>  
  <p>Expense on Books : {{cost * quantity}} Rs</p>
  <p>Roll No: {{student.rollno}}</p>
  <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Ausgabe

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse wie folgt an:

2015616115757530.png (587×339)

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erklären Sie die Module in AngularJS mit examples_AngularJSNächster Artikel：Erklären Sie die Module in AngularJS mit examples_AngularJS

In Verbindung stehende Artikel

Mehr sehen