angular js模型
2016-01-13 11:01
525 查看
(1)ng-model指令与双向绑定
1.ng-model用于绑定应用程序数据到标签的值
一般情况下,控制器数据改变了会改变页面显示的数据,而修改页面数据却不会直接修改控制器中数据
双向数据绑定是指如果页面数据修改了,那么控制器中的数据也会修改
(2)ng-model指令绑定数据的状态
1.touched
触碰过控件就会为true,否则为false
2.dirty
数据被修改过,那么就为true
3.valid
数据通过验证就为true
实例:
1.ng-model用于绑定应用程序数据到标签的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></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> </body> </html>2.双向绑定
一般情况下,控制器数据改变了会改变页面显示的数据,而修改页面数据却不会直接修改控制器中数据
双向数据绑定是指如果页面数据修改了,那么控制器中的数据也会修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> <p>修改输入框的值,标题的名字也会相应修改。</p> </body> </html>
(2)ng-model指令绑定数据的状态
1.touched
触碰过控件就会为true,否则为false
2.dirty
数据被修改过,那么就为true
3.valid
数据通过验证就为true
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></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> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p> <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p> </form> </body> </html>
相关文章推荐
- doT.js详细介绍
- javascript学习笔记
- extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框
- js弹出框、对话框、提示框、弹窗总结
- WOW.js – 让页面滚动更有趣
- JavaScript 基础2
- scrollReveal.js – 页面滚动显示动画JS
- JS中alert中文乱码
- console.error和js异常的区别
- JS常用扩展内建对象
- 简单的JS时钟实例讲解
- angular js表达式
- Jfinal 使用 JsonKit 转换不了问题
- Javascript学习笔记03——Js基本概念
- 解析json之com.google.gson.Gson
- 一些js的用法
- Web Essentials之JavaScript,TypeScript和CoffeeScript
- 浅析JavaScript中的变量复制、参数传递和作用域链
- 匿名函数,结合闭包的写法,js对象的案例
- 匿名函数,结合闭包的写法,js对象的案例