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>

 

posted @ 2016-04-14 22:32  奔跑的蜗牛~  阅读(400)  评论(0)  编辑  收藏  举报