Angularjs基礎(三)

時間  2019-11-18
標籤 angularjs 基礎 欄目 AngularJS 简体版
原文   原文鏈接

　　　　AngularJS ng-model 指令
　　　　ng-model 指令用於綁定應用程序數據到HTML 控制器（input,select,textarea）的值
ng-model指令
　　　　ng-model指令能夠將輸入域的值與AngularJS 建立的變量綁定。
　　　　　　實例：app

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

驗證用戶輸入
　　　　實例：ui

　　　　　　<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的狀況下顯示spa

應用狀態
　　　　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類：
　　　　　　實例;code

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

AngularJS Scope(做用域)對象

　　　　　　　　Scope(做用域) 是應用在HTML(視圖)和JavaScript(控制器)之間的紐帶。
　　　　　　　　Scope是一個對象，有可能的方法和屬性。
　　　　　　　　Scope可應用在視圖和控制器上。blog

如何使用Scope
　　　　　　當你在AngularJS建立控制器時，你能夠將$scope對象當作一個參數傳遞：
　　　　　　　　　　實例： 控制器中的屬性對應了視圖上的屬性：ip

　　　　　　　　　　　　<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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程