AngularJs数据绑定

最新推荐文章于 2023-11-12 18:01:21 发布

约德尔蒙

最新推荐文章于 2023-11-12 18:01:21 发布

阅读量349

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55223093

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJs数据绑定</title>
</head>
<!--  
        AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）  
        展示到视图（View）中。 所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，  
        分为单向绑定和双向绑定两种方式。  
        指定模块  一个页可以有多个模块，但是不能互想嵌套  一般只会有一个  

	        #单向绑定
					单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。
					只能模型（Model）数据向视图（View）传递。
		 
			#双向绑定
					双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，

     -->  
<body ng-app="App">
    <!-- 双向绑定 -->
    <div ng-controller="DemoController" ng-init="sex='男';hobby='写代码'">
    <!-- 模型绑定视图 -->
        <h1 ng-cloak>{{name}}{{age}}</h1>
        <!-- 注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。 -->
        <!-- 双向绑定 -->
        <h2 ng-bind-template="{{name}}{{age}}"></h2>
        <h3>{{sex}}</h3>
        <h4>{{hobby}}</h4>

        <!--  -->
        <input type="text" ng-model="test">
        <!-- 视图向模型绑定 模型返回数据 -->
        <button ng-click="say()">提示</button>
    </div>

    <script src="./libs/angular.min.js"></script>
    <script>
        
        var App = angular.module('App', []);

        App.controller('DemoController', ['$scope', function ($scope) {

            $scope.name = 'Demo的年龄';

            $scope.age = 10;

            $scope.test

            $scope.say = function () {
                alert($scope.test);
            }

        }]);

    </script>
</body>
</html>