AngularJS 模型
来源:互联网 发布:深圳人工智能公司排名 编辑:程序博客网 时间:2024/06/16 05:53
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
1、ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script></head><body><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 = "John Doe";});</script><p>使用 ng-model指令来绑定输入域的值到控制器的属性。</p></html>
2、双向绑定
双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script></head><body><div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h3>你输入了: {{name}}</h3></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.name = "John Doe";});</script><p>修改输入框的值,标题的名字也会相应修改。</p></html>
表单双向数据绑定实例:
<!doctype html><html ng-app="UserInfoModule"><head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/angular.min.js"></script> <script src="Form.js"></script></head><body> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title">双向数据绑定</div> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl"> <div class="form-group"> <label class="col-md-2 control-label"> 邮箱: </label> <div class="col-md-10"> <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label"> 密码: </label> <div class="col-md-10"> <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <div class="checkbox"> <label> <input type="checkbox" ng-model="userInfo.autoLogin">自动登录 </label> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button> <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button> <button class="btn btn-default" ng-click="resetForm()">重置表单</button> </div> </div> </form> </div> </div> </div> </div></body><script>var userInfoModule = angular.module('UserInfoModule', []);userInfoModule.controller('UserInfoCtrl',function($scope) { $scope.userInfo = { email: "827035229@qq.com", password: "827035229", autoLogin: true }; $scope.getFormData = function() { console.log($scope.userInfo); }; $scope.setFormData = function() { $scope.userInfo = { email: 'zm827035229@136.com', password: 'zm827035229', autoLogin: false } }; $scope.resetForm = function() { $scope.userInfo = { email: "827035229@qq.com", password: "827035229", autoLogin: true }; } })</script></html>
3、验证用户输入
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script></head><body><form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form><p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p></html>
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script></head><body><form ng-app="" name="myForm"> Email: <input type="url" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.url">不是一个合法的网址</span></form><p>在输入框中输入你的邮箱地址,如果不是一个合法的网址,会弹出提示信息。</p></html>
以上实例中,提示信息会在 ng-show 属性返回 true 的情况下显示。
4、应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script></head><body><form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">Email:<input type="email" name="myAddress" ng-model="myText" required><p>编辑邮箱地址,查看状态的改变。</p><h3>状态</h3><p>invalid: {{myForm.myAddress.$invalid}} (如果输入的值是非合法的则为 true)。</p><p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p><p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p><p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p><p>Error: {{myForm.myAddress.$error}} (如果输入的值没有错误为空)。</p></form></html>
5、CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script><style>input.ng-empty { background-color: lightblue;}input.ng-valid { background-color: aquamarine;}input.ng-dirty { background-color: limegreen;}input.ng-pending { background-color: greenyellow;}</style></head><body><form ng-app="" name="myForm" ng-init="myText='zm'"> 输入你的名字: <input type="text" ng-model="myText" required></form><p>编辑文本域,不同状态背景颜色会发送变化。</p><p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p></body></html>
ng-model 指令根据表单域的状态添加/移除以下类:ng-empty、ng-not-empty、ng-touched、ng-untouched、ng-valid、ng-invalid、ng-dirty、ng-pending、ng-pristine
<!doctype html><html ng-app="MyCSSModule"><head> <meta charset="utf-8"> <style> .text-red { background-color: #ff0000; } .text-green { background-color: #00ff00; } </style></head><body> <div ng-controller="CSSCtrl"> <p class="{{color}}">测试CSS样式</p> <button class="btn btn-default" ng-click="setGreen()">绿色</button> </div></body><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script><script>var myCSSModule = angular.module('MyCSSModule', []);myCSSModule.controller('CSSCtrl', function($scope) { $scope.color = "text-red"; $scope.setGreen = function() { $scope.color = "text-green"; } });</script></html>
<!doctype html><html ng-app="MyCSSModule"><head> <meta charset="utf-8"> <style type="text/css"> .error { background-color: red; } .warning { background-color: yellow; } </style></head><body> <div ng-controller='HeaderController'> <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div> <button ng-click='showError()'>Simulate Error</button> <button ng-click='showWarning()'>Simulate Warning</button> </div></body><script src="js/angular.min.js"></script><script type="text/javascript">var myCSSModule = angular.module('MyCSSModule', []);myCSSModule.controller('HeaderController', function($scope) { $scope.isError = false; $scope.isWarning = false; $scope.showError = function() { $scope.messageText = 'This is an error!'; $scope.isError = true; $scope.isWarning = false; }; $scope.showWarning = function() { $scope.messageText = 'Just a warning. Please carry on.'; $scope.isWarning = true; $scope.isError = false; }; });</script></html>
0 0
- AngularJS模型
- AngularJS 模型
- angularJS-模型
- angularjs模型
- AngularJS-模型和控制器
- AngularJS - MVC 模型
- AngularJS 0004:模型
- angularjs模型小demo
- 【AngularJS】model模型操作
- AngularJS(三)_模型ng_model
- angularjs $watch监听模型变化
- AngularJS 世界------Angularjs的模型(ng-model)
- AngularJS 中的模型、视图、模板、控制器、服务
- 深究AngularJS——监听模型$watch
- AngularJS 监听 动态增加的控件模型
- angularJs弹性盒模型+bootstrap开发案例
- angularjs 用$watch监听模型变化
- AngularJS杂记4----模型 ng-model
- **MYSQL** 系列四
- Json轻量级数据交换格式
- session、cookie和缓存的区别
- Android 面试题
- Android初学之Bundle
- AngularJS 模型
- 数据结构实验之栈七:出栈序列判定
- 求不重复最长字串长度
- linux下安卓刷机脚本
- new self() 与new static()的区别
- APP开发实战116-集成SO文件
- 宝石比较重量
- 谈谈垃圾回收机制及内存管理
- java泛型