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

Detaillierte Erläuterung der Ausdrucksverwendung in AngularJS_AngularJS

WBOY
Freigeben: 2016-05-16 15:54:41
Original
922 Leute haben es durchsucht

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>

Nach dem Login kopieren

Verwenden Sie die Zeichenfolge

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

Nach dem Login kopieren

Objekt verwenden

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

Nach dem Login kopieren

Verwenden Sie ein Array

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Ausgabe

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

2015616115757530.png (587×339)

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage