AngularJS入门实例2——控制器的使用

最新推荐文章于 2016-02-27 11:01:00 发布

lynch0571

最新推荐文章于 2016-02-27 11:01:00 发布

阅读量837

点赞数 1

分类专栏： HTML/HTML5 Angular.JS 文章标签： angularjs 实例代码 Web前端

本文链接：https://blog.csdn.net/lynch0571/article/details/49741771

版权

HTML/HTML5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Angular.JS

2 篇文章 0 订阅

订阅专栏

一、代码

<!doctype html>
<html>
    <head>
    	<meta charset="utf-8">	
        <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> 
    </head>
    <body>
		<div ng-app="myApp" ng-controller="myCtrl">
			单价: <input type="text" ng-model="price"><br>
			数量: <input type="text" ng-model="count"><br>
			<br>
			控制器属性计算的总价: ￥{{price*count}}<br>
			控制器方法计算的总价: ￥{{totalPrice()}}<br>
		</div>
		<script>
			angular.module("myApp", []).controller('myCtrl', function($scope) {
			    $scope.price = 0.8;
			    $scope.count = 50;
			    $scope.totalPrice=function(){
			    	return $scope.price*$scope.count;
			    }
			});
		</script>
    </body>
</html>

二、说明

1、AngularJS 应用程序由 ng-app 定义，本例应用程序在 <div> 内运行；

2、ng-controller="myCtrl" 是一个 AngularJS 指令，用于定义一个控制器；

3、myCtrl 函数是一个 JavaScript 函数；

4、AngularJS 使用$scope 对象来调用控制器。控制器的 $scope （相当于作用域、控制范围）是表达式执行的上下文，用来保存AngularJS Model(模型)的对象。在 AngularJS 中， $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联。有了 $scope 就在视图和控制器之间建立了一个通道，视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图；

5、控制器在作用域中创建了两个属性 (price和count)；

6、ng-model 指令绑定输入域到控制器的属性（price和count）；

三、参考

Angular 中得 scope 作用域梳理

四、效果图

lynch0571

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS入门实例2——控制器的使用

1、AngularJS 应用程序由 ng-app 定义，本例应用程序在 <div> 内运行；2、ng-controller="myCtrl" 是一个 AngularJS 指令，用于定义一个控制器；3、myCtrl 函数是一个 JavaScript 函数；4、AngularJS 使用$scope 对象来调用控制器。控制器的 $scope （相当于作用域、控制范围）是表达式执行的上下文，用来保存AngularJS Model(模型)的对象。在 AngularJS 中， $scope 的使用贯穿整个 An
复制链接

扫一扫