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

2019-07-08 16:39:32 浏览数 (1)

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

AngularJS 表达式不支持条件判断，循环及异常。

实例 {{ 5 5 }} 或 {{ firstName " " lastName }}

各种类型包括：数组 数字 字符串  对象  

下面以数组为列

代码语言：javascript复制
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

</div>
代码语言：javascript复制
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>

插值操作：

代码语言：javascript复制
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
				});
		}
	});
});
代码语言：javascript复制
<!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:

代码语言：javascript复制
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:

代码语言：javascript复制
<!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>
编程算法 angularjs html

0 人点赞