zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    php对接微信小程序支付
    微信小程序/网站 上传图片到腾讯云COS
    php+smarty轻松开发微社区/微论坛
    精简商务合同管理系统开发
    MyBatis返回map数据
    MyBatis(五)select返回list数据
    MyBatis(四)多参数处理问题
    MyBatis(三)MyBatis的增删改查
    dbconfig.properties
    MyBatis入门(二)接口式编程
  • 原文地址:https://www.cnblogs.com/VARForrest/p/7773371.html
Copyright © 2011-2022 走看看