Heim > Artikel > Web-Frontend > Teilen von AngularJS-Ausdrucksbeispielen

Teilen von AngularJS-Ausdrucksbeispielen

小云云Original: 2018-03-07 16:36:021168Durchsuche

In diesem Artikel werden hauptsächlich AngularJS-Ausdrucksbeispiele mit Ihnen geteilt, in der Hoffnung, allen zu helfen.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 表达式</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<!-- <script src="./angular.min.js"></script> -->
</head>
<body>
<!--
ng-app=""   <p>是angularJS的“所有者”  
*
练习可以空，但项目中一定要赋值，后面所说的模块。
一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。
ng-init=""  初始化数据 
ng-model="name"  输入框的数据绑定给<h1>
-->
<p ng-app="" ng-init="fruits={apple:&#39;苹果&#39;,banana:&#39;香蕉&#39;};exercise=[&#39;足球&#39;,&#39;篮球&#39;,&#39;登山&#39;,&#39;滑雪&#39;,&#39;跑步&#39;];quantity=2;price=5;firstName=&#39;诸葛&#39;;lastName=&#39;孔明&#39;">
<!-- 数据绑定 -->
  
<p>名字 : <input type="text" ng-model="name"></p>
  
<h1>名字：{{ name }}</h1>
<!-- 两种方法进行   {{ a+b }} = ng-bind="a+b" -->
<!-- 数字 -->
  
<h1>算法：{{quantity-price}}</h1>   <!-- -3 --> 
  
<p>总价： <span ng-bind="quantity * price"></span></p>  <!-- 10 --> 
  
<!-- 字符串 -->
  
<p>姓名：{{ firstName + lastName}}</p>        <!-- 诸葛孔明 -->
  
<p>姓名：{{ firstName+&#39;&&#39;+lastName}}</p>      <!-- 诸葛&孔明 -->
  
<p>姓名：<span ng-bind="firstName+&#39;卧龙&#39;+lastName"></span></p>  <!-- 诸葛卧龙孔明 -->
  
<!-- 对象 -->
  
<p>水果：{{ fruits.apple }}</p>                      <!-- 苹果 -->
<p>水果：<span ng-bind="fruits.banana"></span></p>   <!-- 香蕉 -->
<!-- 数组 -->
<p>运动：{{ exercise[3] }}</p>          
<!-- 滑雪 -->
<p>运动：<span ng-bind="exercise[2]"></span></p>
<!-- 登山 -->
</p>
</body>
</html>

Verwandte Empfehlungen:

Detaillierte Beispiele für AngularJS-Ausdrücke

Tutorial zur JavaScript-Erweiterung – AngularJS-Ausdrücke

AngularJS-Erste-Schritte-Tutorial – AngularJS Expressions_AngularJS

Das obige ist der detaillierte Inhalt vonTeilen von AngularJS-Ausdrucksbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So entfernen Sie js aus dem HTML-TagNächster Artikel：So entfernen Sie js aus dem HTML-Tag

In Verbindung stehende Artikel

Mehr sehen