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>

posted @   VarForrest  阅读(296)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示