Maison > Article > interface Web > Partage d'exemples d'expression AngularJS

Partage d'exemples d'expression AngularJS

小云云original: 2018-03-07 16:36:021168parcourir

Cet article partage principalement avec vous des exemples d'expressions AngularJS, dans l'espoir d'aider tout le monde.

<!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>

Recommandations associées :

Exemples détaillés d'expressions AngularJS

Tutoriel d'amélioration JavaScript - Expressions AngularJS

Tutoriel de démarrage d'AngularJS - AngularJS Expressions_AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment supprimer js de la balise htmlArticle suivant：Comment supprimer js de la balise html

Articles Liés

Voir plus