AngualrJS ng-model 数据绑定

最新推荐文章于 2021-02-28 14:03:21 发布

ms_勇往直前

最新推荐文章于 2021-02-28 14:03:21 发布

阅读量456

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/mhw828/article/details/78607697

版权

AngualrJS ng-model 数据绑定

2017/11/20 11:12:56

代码



    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script type="text/javascript" src="js/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("msApp", []);

            app.controller("msCtrl", function ($scope) {
                //定义了name
                $scope.name = "maohuawei"
            })


        </script>

    </head>

    <body ng-app="msApp" ng-controller="msCtrl">
    <!-- 输出name -->
    <h1>{{name}}</h1>

    </body>
    </html>

说明

创建应用程序
创建控制器
设置应用程序
设置控制器
输出name

双向绑定

效果

代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script type="text/javascript" src="js/angular.min.js"></script>

    </head>

    <body ng-app>

    <input type="text" placeholder="请输入姓名" ng-model="name">

    <h1>{{name}}</h1>

    </body>
    </html>

说明

select 双向绑定

效果

代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script type="text/javascript" src="js/angular.min.js"></script>

    </head>

    <body ng-app>


    <select ng-model="txt">
        <option>中国</option>
        <option>美国</option>

    </select>


    <h1>{{txt}}</h1>

    </body>
    </html>