AngularJs学习——实现数据绑定的三种方式

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34113237

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lvmylife/p/5393383.html

本文介绍了AngularJS中实现数据绑定的三种方法：直接使用{{}

三种方式：

方式一：<h5>{{msg}}</h5> 此方式在页面刷新的时候会闪现{{}}
方式二：<h5 ng-bind="msg"></h5>
方式三：<h5 ng-clock class="ng-clock">{{msg}}</h5>

示例代码：

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AngularJs12-实现数据绑定的三种方式</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"/>
</head>
<body>
    <div ng-controller="MyCtrl" style="padding: 60px;">
        <input type="text" class="form-control" ng-model="msg">
        <!-- 方式1 -->
        <h5>{{msg}}</h5>
        <!-- 方式2 -->
        <h5 ng-bind="msg"></h5>
        <!-- 方式3 -->
        <h5 ng-clock class="ng-clock">{{msg}}</h5>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        angular.module('myapp',[])
        .controller('MyCtrl',function($scope){
            $scope.msg = 'Hello Angular!'
        })
     </script>
</body>
</html>