1-3.编写一个绑定页面元素的angular程序

xyphf_和派孔明

于 2016-06-23 00:35:12 发布

阅读量729

点赞数

分类专栏： angular.js入门文章标签： angular

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/51738146

版权

angular.js入门专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个简单的AngularJS应用程序实例，展示了如何使用AngularJS的ng-model指令实现页面元素与逻辑层数据之间的双向绑定。通过一个文本框输入示例，用户可以直观地看到输入的内容即时反映在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app>
<!-- ng-app 由angular.js接管整个页面 -->
<head>
    <meta charset="UTF-8">
    <title>编写一个绑定页面元素的angular程序</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <h3>请在下列文本框中输入任意内容</h3>
    <div ng-controller="usercontroller"> <!-- ng-controller声明控制器名称,管理该div下面的所有元素 -->
        <input id="Text1" type="text" ng-model="user.name" /> 
        <!-- ng-model 绑定逻辑层中的user.name数据,并同时通过双花括号想页面的另一个div元素中插入相同的user.name元素 
             ng-model 方式绑定的数据是双向变化的
        -->
        <div>{{user.name}}</div>
    </div>

    <script type="text/javascript">
        function usercontroller($scope){
            $scope.user = {name:""};
        }
    </script>

</body>
</html>