• angularJS(3)


    一.angularJs的指令模型ng-model指令

    ng-model 指令 绑定 HTML 元素 到应用程序数据。
    为应用程序数据提供类型验证(number、email、required)。
    为应用程序数据提供状态。
    为 HTML 元素提供 CSS 类。
    绑定 HTML 元素到 HTML 表单。

    复制代码
    <div ng-app="myapp" ng-controller="mycc">
        名字: <input ng-model="name">
    </div>
    <script>
    var app = angular.module('myapp', []);
    app.controller('mycc', function($scope) {
        $scope.name = “宋小宝";
    });
    </script>
    复制代码

    二.angularJs的指令模型ng-model指令:双向绑定

    在修改输入域的值时, AngularJS 属性的值也将修改:

    复制代码
    <div ng-app="myapp" ng-controller="mycc">
        名字: <input ng-model="name">
        <h1>你输入的名称是:{{name}}</h1>
    </div>
    
    <script>
    var app = angular.module('myapp', []);
    app.controller('mycc', function($scope) {
        $scope.name = “宋小宝";
    });
    </script>
    复制代码

    三.angularJs的应用

    复制代码
    <div ng-app="myapp" ng-controller="myctrl">
        姓:<input type="text" ng-model="xing"><br>
            名:<input type="text" ng-model="ming">
            <h1>你的姓名是:{{xing+""+ming}}</h1>
    </div>
    <script>
        var app=angular.module("myapp",[]);
        app.controller("myctrl",function($scope){
             $scope.xing="宋";
             $scope.ming="小宝";
        })
    </script>
    复制代码

    实例说明:
    模块(m):var app = angular.module('myApp', []);
    控制器(c):app.controller("myctrl",function($scope){   })
    视图(v):就是html区域

    四.angularJs模型

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
    ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定

    复制代码
    <div ng-app="myApp" ng-controller="myCtrl">
        名字: <input ng-model="name">
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = “花果山美猴王";
    });
    </script>
    复制代码
  • 相关阅读:
    C#委托及事件 详解(讲得比较透彻)
    浅谈前端常用脚手架cli工具及案例
    C++实现二分法详解
    重新整理 .net core 实践篇————重定向攻击[三十九]
    动态规划_备忘录法_矩阵链乘问题
    完了,又火一个项目
    DOM常用的属性和方法
    一些胡乱的吐槽
    Mac安装compass失败的原因
    css动画animation-keyframes
  • 原文地址:https://www.cnblogs.com/alinaxia/p/6241026.html
Copyright © 2020-2023  润新知