angularJS学习之路（五）---表达式

最新推荐文章于 2024-06-18 15:37:04 发布

wust小吴

最新推荐文章于 2024-06-18 15:37:04 发布

阅读量685

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u014737138/article/details/49981455

版权

angularjs 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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 }},\n\nMy 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>

wust小吴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS学习之路（五）---表达式

AngularJS 表达式写在双大括号内：{{ expression }}。AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。AngularJS 表达式不支持条件判断，循环及异
复制链接

扫一扫