Angularjs基础(三)
AngularJS ng-model 指令
ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
ng-model指令
ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
实例:
<div ng-app="myApp" ng-controller="myCtrl">
名字:<input ng-model="name">
</div>
<script>
var app = angular.module('mgApp',[]);
app.controller('myCtrl',function($scope){
$scope.name = "John Doe";
})
</script>
双向绑定
双向绑定,在修改输入域的值时,AngularJS属性的值也将修改:
实例:
<div ng-app="myApp" ng-controller="myCtrl">
名字:<input ng-model="name">
<h1>你输入了:{{name}}</h1>
</div>
验证用户输入
实例:
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
以上实例中,提示信息会在ng-show 属性返回true的情况下显示
应用状态
ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)
实例:
<from ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</from>
CSS 类
ng-model指令基于他们的状态为HTML 元素提供了CSS类:
实例;
<style>
input .ng-invalid{
background-color:lightblue;
}
</style>
<body>
<from ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</from>
</body>
ng-model 指令根据表单域的状态添加/移除一下类
ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid
ng-dirty ng-pending ng-pristine
AngularJS Scope(作用域)
Scope(作用域) 是应用在HTML(视图)和JavaScript(控制器)之间的纽带。
Scope是一个对象,有可能的方法和属性。
Scope可应用在视图和控制器上。
如何使用Scope
当你在AngularJS创建控制器时,你可以将$scope对象当做一个参数传递:
实例: 控制器中的属性对应了视图上的属性:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.carname = "Volvo";
})
</script>
当在控制器中添加$scope对象时,视图(HTML)可以获取了这些属性
视图中,你不需要添加$scope前缀,只需要添加属性名即可,如{{carname}}。
Scope概述
AngularJS应用组成如下:
View(视图),即HTML。
Model(模型),当前视图中可用的数据。
Controller(控制器),即JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
实例: 如果你改变了视图,模型和控制器也会相应更新。
<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 Dow";
})
</script>
Scope 作用范围
了解你当前使用的scope是非常重要的。
实例:当我们使用ng-repeat 指令时,没个重复项都访问了当前的重复对象。
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in name"></li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.names = ["Emil","Tobias","Linus"]
});
</script>
每个<li>元素可以访问当前的重复对象,这里对应用的是一个字符串,并使用变量x 表示。
根作用域
所有的应用都有一个$rootScope,它可以作用在ng-app 指令包含的所有HTML 元素中。
$rootScope可作用域整个应用中,是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
实例:创建控制器时,将$rootScope作为参数传递,可在应用中使用:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in name">{{x}}{{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$rootScope){
$scope.names = ["Emil","Tobias","Linus"];
$rootScope.lastname = "Refsnes";
})
</script>
AngularJS 控制器
AngularJs 控制器 控制AngularJS 应用程序的数据。
AngularJS 控制器是常规的JavaScript对象。
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller指令定义了应用程序控制器。
控制器时JavaScript对象,由标准的JavaScript对象的构造函数 创建。
实例:
<div ng-app="myApp" ng-controller="myCtrl">
名:<input type="text" ng-model = "firstName"><br>
姓:<input type="text" ng-model = "lastName">
姓名:{{firstName "" lastName}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
})
</script>
应用解析:
AngularJS 应用程序由ng-app定义。应用程序在<div>内运行。
ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。
myCtrl 函数是一个JavaScript 函数。
AngularJS 使用$scope对象来调用控制器。
在AngularJS 使用$scope是一个应用像(属于应用变量和函数)
控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)的对象。
控制器在作用域中创建两个属性(firstName 和lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和lastName)。
控制器方法
上面的石磊演示了一个带有lastName 和firstName 这两个属性的控制器对象。
控制器也可以有方法变量和函数
实例
<div ng-app="myApp" ng-controller="personCtrl">
名:<input type="text" ng-model="firstName">
姓:<input type="text" ng-model="lastName">
姓名:{{fullName()}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firsName = "John";
$scope.lastName = "Doe";
$scope.fullName = function(){
return $scope.firstName "" $scope.lastName;
}
})
</script>
外部文件中的控制器
在大型的应用程序中,通常是把控制器存储在外部文件中。
只需要把<script>标签中的代码复制到名为personController.js的外部文件中即可:
实例:
<div ng-app="myApp" ng-controller = "personCtrl">
First Name:<input type="text" ng-model = "firstName">
Last Name:<input type="text" ng-model="lastName">
Full Name:{{firstName " " lastName}}
</div>
<script src="personController.js"></script>
其他实例
实例:
angular.module('myApp',[]).controller('namesCtrl',function($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
<div ng-repeat="myApp" ng-controller="nameCtrl">
<ul>
<li ng-repeat="x in name">
{{x.name 'x' x.country]}}
</li>
</ul>
</div>
<script src="namesController.js"></script>
更多专业前端知识,请上 【猿2048】www.mk2048.com
Angularjs基础(三)相关推荐
- 第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础
第二讲 html5框架+Crosswalk 打包 app 以及 Angularjs 基础(初步认识了解 Angularjs) 学习要点: 1. html5 框架+Crosswalk 打包 a ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- 视频教程-AngularJS基础入门视频课程-AngularJS
AngularJS基础入门视频课程 南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从事软件 ...
- AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
- AngularJs 基础教程 —— 依赖注入
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- 依赖注入 AngularJS 依赖注 ...
- [GO语言基础] 三.变量声明、数据类型、标识符及编程练习12题
作为网络安全初学者,会遇到采用Go语言开发的恶意样本.因此从今天开始从零讲解Golang编程语言,一方面是督促自己不断前行且学习新知识:另一方面是分享与读者,希望大家一起进步.前文介绍了Go的编译运行 ...
- 现在就开始使用AngularJS的三个重要原因
日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说A ...
- C++学习基础三——迭代器基础
C++学习基础三--迭代器基础 迭代器分为两种:一种是iterator,另一种是const_iterator. 两者都可进行访问容器中的元素,不同之处是: (1)const_iterator类型只能用 ...
- AngularJs 基础教程 —— 控制器
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- 控制器 AngularJS 控制器A ...
最新文章
- c语言switch中用ifelse,初学者求问:用if单分支选择语句替换switch语句?if.else呢...
- Linux C 串口属性设置
- Storm教程3编程接口
- C++中const、volatile、mutable的用法
- idea怎么把代码放到git_在IntelliJ IDEA中同步代码到华为云git仓库 (on windows)
- SQL语句优化常见方法
- 【C++软件开发】面试经典题目汇总
- 制作自己的绿色版 FireFox
- Mapstruct使用介绍
- 应用程序无响应的原因
- 抓包发现tcp会话中老是出现重复的ack和大量的tcp重传——SACK(Selective Acknowledgment, 选择性确认)技术
- 1.1你是谁?你从哪来?你到哪去? -交给学习来解答
- php单元测试入门教程phpunit详解
- matlab 填补空洞,OpenCV空洞填充算法
- 分享一个妄想山海脚本辅助,另附PHP随机数生成器代码
- noindex如何使用?
- LDA的python实现之模型参数训练
- SVN-服务器及pc端SVN搭建
- 2022最新酒桌小游戏小程序源码(附带流量主)
- Python安装jieba库的具体步骤