AngularJS學習筆記2

時間 2019-11-18

原文原文鏈接

3.AngularJS 表達式

AngularJS 表達式寫在雙大括號內：{{ expression }}。AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。它們能夠包含文字、運算符和變量。express

AngularJS 實例app

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名： {{ firstName + " " + lastName }}</p>

</div>

AngularJS 對象就像 JavaScript 對象：ui

AngularJS 實例spa

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓爲 {{ person.lastName }}</p>

</div>

AngularJS 表達式 與 JavaScript 表達式code

相似於 JavaScript 表達式，AngularJS 表達式能夠包含字母，操做符，變量。orm

與 JavaScript 表達式不一樣，AngularJS 表達式能夠寫在 HTML 中。對象

與 JavaScript 表達式不一樣，AngularJS 表達式不支持條件判斷，循環及異常。blog

與 JavaScript 表達式不一樣，AngularJS 表達式支持過濾器。ip

4.AngularJS ng-model 作用域

ng-model 指令用於綁定應用程序數據到 HTML 控制器(input, select, textarea)的值。

<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>修改輸入框的值，標題的名字也會相應修改。</p>

驗證用戶輸入

<form ng-app="" name="myForm">

    Email:

    <input type="email" name="myAddress" ng-model="text">

    <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>

</form>

ng-model 指令基於它們的狀態爲 HTML 元素提供了 CSS 類：

<style>

input.ng-invalid {
    background-color: lightblue;
}

</style>
<body>

<form ng-app="" name="myForm">
    輸入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

ng-model 指令根據表單域的狀態添加/移除如下類：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

5.AngularJS Scope(做用域)

Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

控制器中的屬性對應了視圖上的屬性：

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