码迷,mamicode.com
首页 > 其他好文 > 详细

angular 实时显示用户输入内容

时间:2020-04-13 19:35:02      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:title   bin   doc   通过   调用   语法   rootscope   mode   script   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--angularJS关注的不再是DOM模型,而是数据本身  -->
    <!-- 告诉angular去监管哪块区域,ng-app(指令)写在body上,body已经被angularJS监管,body中所有用angularJS语法写的东西都会被识别 -->
    <!-- $rootScope:根作用域 -->
    <!-- ng-model(指令):它设置了一个属性,是属于根作用域对象的一个属性,属性名:username,属性值:input的value -->
    <body ng-app="">
        <!-- 将这个input中的内容设置为一个模型,这个模型的名字为username -->
        <input id="i1" type="text" ng-model="username" /><br>
        <!-- 用户名:<span id="s1"></span> -->
        <!-- {{模型名}}通过这种方式来进行调用 -->
        <!-- angular中的表达式语法:{{属性名}} -->
        用户名:<span>{{username}}</span>
    </body>
    <!-- <script src="../images/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> -->
    <script type="text/javascript" src="js/angular.min-1.2.9.js" charset="UTF-8"></script>
    
<!--     jQuery实现 -->
    <!-- <script type="text/javascript">
        
        $(function(){
            $("#i1").bind("keyup",function(){
                /* this取到的dom对象,需要转为jQuery对象 */
                /* alert(this.val()); */
                /* dom对象转为jQuery对象 */
                $("#s1").html($(this).val());
            });
        });
    </script> -->
</html>

 

angular 实时显示用户输入内容

标签:title   bin   doc   通过   调用   语法   rootscope   mode   script   

原文地址:https://www.cnblogs.com/qilin20/p/12693266.html

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