Angularjs基础(三)

比眉伴天荒 2023-06-11 04:22 3阅读 0赞

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**