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

た入场券 2022-06-08 07:14 162阅读 0赞

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>
                
                <input type="text" ng-model="mvvm" />{
       {mvvm}}
    
                
    			<h3 ng-click="changeName()">点我变数据{
       {userName}}</h3>
    		</div>
    		
    		<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>