angularjs速成学习个人理解_1数据与模型绑定

最新推荐文章于 2023-03-07 16:29:39 发布

dl0246

最新推荐文章于 2023-03-07 16:29:39 发布

阅读量406

点赞数

分类专栏： Web前端技术文章标签： angular angularjs 数据绑定

本文链接：https://blog.csdn.net/dl0246/article/details/78024051

版权

Web前端技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了AngularJS中的数据绑定原理，重点讲解了模型与视图之间的同步过程。模型指的是$scope中的数据，视图通过{{表达式}}和ng-model实现数据展示和双向绑定。当模型或ng-model发生变化时，另一方会立即自动更新，实现数据的实时反映。

摘要由CSDN通过智能技术生成

Angularjs最牛的地方我人为他为前端的数据渲染（页面上数据的显示）提供了良好的方式。另外一个比较好玩的在于数据的双向绑定。

首先学习数据的绑定方式：

在angular中，数据的绑定是同步在模型与视图之前。

模型指的是$scope中的数据模型。

视图指的是html标签上的表达式{{表达式}}、ng-model。这里ng-model才是数据可以双向绑定的。{{表达式}}方式紧用于数据的显示，也就是单选绑定。

当数据在模型中发生改变的时候，视图也相应的发生改变。当在视图（ng-model）中发生改变的时候,模型数据也发生改变。

模型数据与视图的绑定是立刻并且自动的发生，这个过程是每时每刻的。

下面的代码很多注释，由于我习惯先学项目再搞理论。所以可能有理解不正确的地方请个位看官指正。

<!DOCTYPE html>

<html ng-app="myApp">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Data Binding - AngularJS Test</title>
		<style type="text/css">
			.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
		</style>
	</head>
	<body>
		<div class="test-div" ng-controller="myCtrl">
            <h1>时时发生变更的视图表达式{{number}}</h1>
            <!-- 这个mvvm就是神奇的双向绑定。修饰input将与input的value进行双向绑定。
            value发生改变那么model也发生改变 -->
            <input type="text" ng-model="mvvm" />{{mvvm}}

            <!-- $scope的数据模型是Function类型，那么当发生点击事件时将运行模型中的函数体 -->
			<h3 ng-click="changeName()">点我变数据{{userName}}</h3>
		</div>
		<!-- 通常防止页面的加载缓慢，目的是先加载html的标签。angular或其他库先加载会影响页面的速度 -->
		<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
		<script type="text/javascript">

            // 对应ng-app声明这是一个模块，并获取模块对象
			var myApp = angular.module("myApp", []);

            // 对应ng-controller声明一个控制器。一个模块下可以包含多个控制器
			myApp.controller("myCtrl", function($scope, $interval) {

                // 创建数据模型number并赋值
                $scope.number = 0;
                $scope.mvvm="初始值";
                // 此函数是对js的interval函数的扩展。
                $interval( function(){

                    // 每一次修改自加1, 视图中{{number}}将立刻改变。
                    $scope.number = $scope.number + 1;

                }, 1000, 10); // 每隔1000毫秒改变一次作用域的number数据的值，一共循环10次


                // 那么当发生点击事件时将运行模型中的函数体
				$scope.changeName = function() {
                    // 添加模型数据userName并赋值Mytest
					$scope.userName = "Mytest";
				};
			});
		</script>
	</body>
</html>