search

Home >Web Front-end >JS Tutorial >AngularJS expression example sharing

AngularJS expression example sharing

小云云
小云云Original
2018-03-07 16:36:021252browse

This article mainly shares AngularJS expression examples with you, hoping to help everyone. 

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

Related recommendations:

Detailed examples of AngularJS expressions

JavaScript enhancement tutorial-AngularJS expression

AngularJS Getting Started Tutorial: AngularJS Expressions_AngularJS

The above is the detailed content of AngularJS expression example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to remove js from html tagNext article：How to remove js from html tag

Related articles

See more