angularJS学习之路(五)---表达式
时间:2022-06-25
本文章向大家介绍angularJS学习之路(五)---表达式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
AngularJS 表达式不支持条件判断,循环及异常。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
各种类型包括:数组 数字 字符串 对象
下面以数组为列
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
插值操作:
var app = angular.module('myApp', []);
app.controller('MyController', function($scope, $interpolate) {
$scope.to = 'ari@fullstack.io';
$scope.emailBody = 'Hello {{ to }},nnMy name is Ari too!';
// Set up a watch
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText =
template({
to: $scope.to
});
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="MyController">
<input ng-model="to" type="email" placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/express1.js"></script>
</body>
</html>
更改表达式 默认符号 :
angularjs中提供的表达式形式是:{{}} 这样的,你可以自己来设置特殊的格式;
代码如下:
js:
angular.module('myApp', ['emailParser'])
.controller('MyController', ['$scope', 'EmailParser',
function($scope, EmailParser) {
$scope.to = 'ari@fullstack.io';
$scope.emailBody = 'Hello __to__';
// Set up a watch
$scope.$watch('emailBody', function(body) {
if (body) {
$scope.previewText =
EmailParser.parse(body, {
to: $scope.to
});
}
});
}
]);
angular.module('emailParser', [])
.config(['$interpolateProvider',
function($interpolateProvider) {
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}
])
.factory('EmailParser', ['$interpolate',
function($interpolate) {
// a service to handle parsing
return {
parse: function(text, context) {
var template = $interpolate(text);
return template(context);
}
};
}
]);
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-app="myApp" id="emailEditor" ng-controller="MyController">
<input ng-model="to" type="email" placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<div id="emailPreview">
<pre>__ previewText __</pre>
</div>
</div>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/express2.js"></script>
</body>
</html>
- 跟Google学写代码--Chromium/base--windows_version源码学习及应用
- 一步步教你弹性框架-下篇
- R语言与机器学习(分类算法)朴素贝叶斯算法
- 【美团技术团队博客】RACSignal的Subscription深入分析
- 谈谈个人网站的建立(八)—— 缓存的使用
- 【编程基础】System.arraycopy()和 Arrays.copyOf()
- 移动端 模拟手机联系人触摸A~Z导航
- 谈谈个人网站的建立(七)—— 那些建站必备的插件
- 【美团技术团队博客】Linux资源管理之cgroups简介
- 谈谈个人网站的建立(六)—— 数据库同步
- Javascript解析机制 执行机制
- Tomcat9源码——编译环境搭建
- 谈谈个人网站的建立(五)—— 小集群的部署
- 跟Google学写代码--Chromium/base--cpu源码学习及应用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 读取csv格式数据文件
- Android LitePal的简单使用
- Android RecyclerVIew列表使用 (编辑、单选、全选、删除、动画效果+附源码)
- Android TV 焦点控制
- Kotlin学习日志(四)函数
- Kotlin学习日志(三)控制语句
- Kotlin学习日志(一)TextView、Button、Toast的使用
- Kotlin学习日志(二)数据类型
- Toast提示工具类
- RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
- MD5加密工具类
- Kotlin修炼指南(四)
- Android Studio 安装APK在虚拟机时报 Installation failed due to: 'null' 解决
- 在Android Studio中使用Kotlin
- Day21.Python项目案例