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

angular学习笔记(十三)

2014-05-10 13:03 330 查看

本篇主要介绍控制器的$scope中的数据是如何被改变的:

以下三种方法,都可以改变$scope中的number值:

1. 表达式:

<span ng-click="number=number+3">点击改变值1</span>

2. 回调函数:

<span ng-click="computeNum()">点击改变值2</span>

$scope.computeNum = function(){
　　$scope.number = $scope.number+3
}

3. input元素的ng-model属性:

<input type="text" ng-model="number"/>

完整代码:

<!DOCTYPE html>
<html ng-app>
<head>
<title>10.1$scope数据控制</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller = "ScopeData">
<span ng-click="number=number+3">点击改变值1</span>
<br>
<span ng-click="computeNum()">点击改变值2</span>
<br>
<span><input type="text" ng-model="number"/></span>
<p>{{number}}</p>
</div>
</body>
</html>

function ScopeData ($scope){
$scope.number = 0;
$scope.computeNum = function(){
$scope.number = $scope.number+3
}
}

可以看到,这三种方法都可以动态实时的改变$scope中number的值,其中,1和2是等价的.

*注意,在表达式里直接写ng-click="number-3"是无效的表达式.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航