码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-14 23:57:33      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:

三种方式:

  • 方式一:<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>

 

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

标签:

原文地址:http://www.cnblogs.com/lvmylife/p/5393383.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!