代码改变世界

angular 实时显示用户输入内容

2020-04-13 19:02  默默不语  阅读(398)  评论(0)    收藏  举报 
<!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>