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>

Angularjs基础(三)的更多相关文章

  1. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  2. 现在就开始使用AngularJS的三个重要原因

    现在就开始使用AngularJS的三个重要原因 在线演示1 本地下载 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单 ...

  3. Python全栈开发【基础三】

    Python全栈开发[基础三]  本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...

  4. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  5. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  6. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  7. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  8. jdbc基础 (三) 大文本、二进制数据处理

    LOB (Large Objects)   分为:CLOB和BLOB,即大文本和大二进制数据 CLOB:用于存储大文本 BLOB:用于存储二进制数据,例如图像.声音.二进制文件 在mysql中,只有B ...

  9. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

随机推荐

  1. Java - > for, while 及 do.while循环

    为什么要用到循环结构: 按顺序结构执行程序语句(方法或者代码块)只能被执行一次.如果要多次执行,就需要使用到循环结构(循环结构是指在程序中需要反复执行某个功能而设置的一种程序结构) 布尔表达式:是一段 ...

  2. mpvue自定义化后台富文本样式

    最近公司写小程序开始换框架了,之前用wepy,现在用mpvue. mpvue是基于vue的写法来开发微信小程序.虽然不完全和vue一样,但是大致和vue一样,所以基本开发上是上手很快的. 现在项目进程 ...

  3. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  4. js获取css的各种样式并且设置他们

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...

  5. vuejs的双向数据绑定实现原理——object.defineproperty()

    视图和数据变化绑定 而vue.js主要利用了accessor descriptors的set和get来更新视图,这里看到的这个例子挺好,是一个简单的绑定.对于一个html页面 <div> ...

  6. C语言入门（一）环境搭建

    1. 下载Code::Blocks(源文本编辑器) 2. 下载编译器MinGW(或者下载好自带编译器的codeblocks) http://jingyan.baidu.com/article/c843 ...

  7. SharePoint Designer - View

    1. 数据视图 可以将图片.新闻等列表(如: Announcement)用以下视图显示,具体做法可以参考这篇文章,但需要强调几个地方: 1.1 选择了视图样式后,需要点击“自定义” --> &q ...

  8. js判断一个对象是否为数组

    1,真正的数组的判断方法 javascript中最简单的声明数组方法为: var a = []; 判断是否为数组的最直接的方法为: 复制代码 代码如下: a instanceof Array //tr ...

  9. 【SQL Server 2012】按倒序存储“分组统计”结果的临时表到新建表

    程序预先说明: 本文访问的数据库是基于存有RDF三元组的开源数据库Localyago修改的库,其中只有一个表,表中有五个属性:主语subject.谓语predict.宾语object.主语的编号sub ...

  10. docker-day1-安装和基本使用

    Docker 1.什么是docker Docker 是一个开源项目,可以实现轻量级的操作系统虚拟化解决方案. Docker 的基础是 Linux 容器(LXC)等技术.在 LXC 的基础上 Docke ...