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

时间：2023-03-10 08:13:41
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>

相关文章