• angular Model 指令


    ng-model指令用于绑定应用程序数据到HTML控制器(input、select、textarea)的值。可以将输入域的值域AngularJS创建的变量绑定;并且支持双向绑定。如下例子:

    <div ng-app="myapp" ng-controller="mycontroller">

    name:<input ng-model="name">

    <h1>you input value is:{{name}}</h1>

    </div>

    <script>

    var app=angular.module('myapp',[]);

    app.controller('mycontroller',function($scope){

    $scope.name='Qiang Li';

    });

    </script>

    验证用户输入

    ng-shw会在返回true的情况下显示。如下例子

    <form ng-app="" name="myform">

    Email:<input type="email" name="myAddress" ng-model="text"></input>

    <span ng-show="myform.myAddress.$error.email">invalid</span>

    </form>

    应用状态

    ng-model指令可以为应用程序提供状态值(invalid、dirty、error)

    CSS类

    ng-model指令基于它们的状态为HTML元素提供了CSS类,可以添加或移除的类有:

    ng-empty:

    ng-not-empty

    ng-touched:用户是否和控件进行了交互、或者是是否失去焦点

    ng-untouched:用户是否没有和控件进行了交互、或者是否没有失去焦点

    ng-valid:未通过验证的表单;

    ng-invalid:表单 是否通过验证

    ng-dirty:是否修改了表单

    ng-pending:任何满足$asyncValidatorsd情况

    ng-pristine:控件是否为初始值

    用法如下:

    <style>

    input.ng-invalid{

    background-color:ligthtbule;

    }

    </style>

    <body>

    <form ng-app="" name="myform">

    the name inputed:<input name="myAddress" ng-model="text" required></input>

    </form>

    </body>

  • 相关阅读:
    [转]Asp.Net页面输出到WORD、EXCEL、TXT、HTM等类型的文档
    人工智能AI基础 四
    关于设计的一点小结 四
    Visual Studio 11 将强化对2D/3D游戏开发的支持 四
    如何正确的对待设计模式 四
    C++设计模式原型模式 四
    C++游戏编程8步云 四
    Qt编译 四
    软件架构师应该知道的97件事 四
    给年轻程序员的几句话 四
  • 原文地址:https://www.cnblogs.com/VARForrest/p/7773371.html
Copyright © 2020-2023  润新知