<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<Meta charset="UTF-8">
<title>AngularJs Expressions</title>
<style>
a{color:blue; text-decoration: underline;cursor:pointer}
</style>
</head>
<body>
<div ng-controller="myController">
Directly accessing variables in the scope:<br>
{{speed}} {{vehicle}}<hr>
Adding variables in the scope:<br>
{{speed + ' '+vehicle}}<hr>
Calling function in the scope:<br>
{{lower(speed)}} {{upper('Jeep')}}<br>
<a ng-click="setValues('Fast',newVehicle)">
Click to change to Fast {{newVehicle}} #为文字增加ng-click事件
</a><hr>
<a ng-click="setValues(newSpeed,'Rocket')">
Click to change to {{newSpeed}} Rocket
</a><hr>
<a ng-click="vehicle='Car'">
Click to change the vehicle to a Car
</a><hr>
<a ng-click="vehicle='Enhanced'+vehicle">
Click to Enhance Vehicle
</a><hr>
<script src ="http://code.angularjs.org/1.3.0/angular.min.js"></script>
<script src = "expression_scope.js"></script>
</div>
</body>
</html>
新建expression_scope.js页面：
/**
* Created by 奔跑的阿甘
*/
angular.module('myApp',[]).controller('myController',function ($scope) {
$scope.speed = 'Slow';
$scope.vehicle = "Train";
$scope.newSpeed = 'Hypersonic';
$scope.newVehicle = 'Plane';
$scope.upper = function (aString) {
return angular.uppercase(aString);
};
$scope.lower = function (aString) {
return angular.lowercase(aString);
};
$scope.setValues = function (speed,vehicle) {
$scope.speed = speed;
$scope.vehicle = vehicle;
};
});