您的位置：首页 > Web前端 > AngularJS

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

2015-11-09 18:09 615 查看

一、代码

<!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 作用域梳理

四、效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs 实例 代码 Web前端
相关文章推荐
新的分享
章节导航