AngularJS 基礎(chǔ)

Angular JS 基礎(chǔ)

本文中的AngularJS是AngularJS 1.x

AngularJS是一個(gè)JavaScript框架。通過<script>標(biāo)簽添加到HTML頁面。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

建議把腳本放在 <body> 元素的底部。這會提高網(wǎng)頁加載速度，因?yàn)?HTML 加載不受制于腳本加載。

通過指令擴(kuò)展html，通過表達(dá)式綁定數(shù)據(jù)到html。

AngularJS官網(wǎng)

AngularJS 官方API

菜鳥教程：AngularJS參考手冊

簡介

【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
</head>
<body>
<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>
<script src="angular.min.js"></script>
</body>
</html>

AngularJS 擴(kuò)展了 HTML

AngularJS 通過 ng-directives 擴(kuò)展了 HTML。
ng-app 指令定義一個(gè) AngularJS 應(yīng)用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。

什么是AngularJS

AngularJS 使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易。
AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
AngularJS 可以克隆和重復(fù) HTML 元素。
AngularJS 可以隱藏和顯示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代碼。
AngularJS 支持輸入驗(yàn)證。

AngularJS 指令

AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應(yīng)用程序變量。
使用 ng-init 不是很常見。一般使用

【示例】

<div ng-app="" ng-init="firstName='John'"> 
    <p>姓名為 <span ng-bind="firstName"></span></p>
</div>

AngularJS 表達(dá)式

AngularJS 表達(dá)式寫在雙大括號內(nèi)：{{ expression }}。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達(dá)式很像 JavaScript 表達(dá)式：它們可以包含文字、運(yùn)算符和變量。

例如： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

//顯示10
<div ng-app=""> 
    <p><span >{{5+5}}</span></p>
</div>
//顯示Danyang Zhang
<div ng-app="" ng-init="firstName='Danyang';lastName='Zhang'"> 
    <p><span >{{firstName+" "+ lastName}}</span></p>
</div>

AngularJS 應(yīng)用

AngularJS 模塊（Module）定義了 AngularJS 應(yīng)用。
AngularJS 控制器（Controller）用于控制 AngularJS 應(yīng)用。
ng-app指令定義了應(yīng)用, ng-controller 定義了控制器。

【示例】

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

Angular 模塊

模塊定義了一個(gè)應(yīng)用程序。
模塊是應(yīng)用程序中不同部分的容器。
模塊是應(yīng)用控制器的容器。
控制器通常屬于一個(gè)模塊。

創(chuàng)建模塊

你可以通過 AngularJS 的 angular.module 函數(shù)來創(chuàng)建模塊：

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

添加控制器

你可以使用 ng-controller 指令來添加應(yīng)用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

添加指令

AngularJS 提供了很多內(nèi)置的指令，你可以使用它們來為你的應(yīng)用添加功能。

<div ng-app="myApp" zdy-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        template : "我在指令構(gòu)造器中創(chuàng)建!"
    };
});
</script>

Angular JS 表達(dá)式

數(shù)字

<div ng-app="" ng-init="quantity=1;cost=5">  
    <p>總價(jià)： {{ quantity * cost }}</p>
</div>

或者

<div ng-app="" ng-init="quantity=1;cost=5">
    <p>總價(jià)： <span ng-bind="quantity * cost"></span></p>
</div>

字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名： {{ firstName + " " + lastName }}</p> 
</div>

或者

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

對象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <p>姓為 {{ person.lastName }}</p>
</div>

或者

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <p>姓為 <span ng-bind="person.lastName"></span></p>
</div>

數(shù)組

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三個(gè)值為 {{ points[2] }}</p>
</div>

或者

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三個(gè)值為 <span ng-bind="points[2]"></span></p>
</div>

AngularJS 表達(dá)式與 JavaScript 表達(dá)式

類似于 JavaScript 表達(dá)式，AngularJS 表達(dá)式可以包含字母，操作符，變量。
與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式可以寫在 HTML 中。
與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式不支持條件判斷，循環(huán)及異常。
與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式支持過濾器。

AngularJS API

angular.lowercase() 轉(zhuǎn)換字符串為小寫
angular.uppercase() 轉(zhuǎn)換字符串為大寫
angular.isString()  判斷給定的對象是否為字符串，如果是返回 true。
angular.isNumber()  判斷給定的對象是否為數(shù)字，如果是返回 true。

AngularJS指令

AngularJS 通過被稱為指令的新屬性來擴(kuò)展 HTML。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能。
AngularJS 允許你自定義指令。

AngularJS 指令

【示例】

<div ng-app="" ng-init="quantity=1;price=5">
<h2>價(jià)格計(jì)算器</h2>
數(shù)量： <input type="number"    ng-model="quantity">
價(jià)格： <input type="number" ng-model="price">
<p><b>總價(jià)：</b> {{ quantity * price }}</p>
</div>

ng-app

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序的"所有者"。一個(gè)網(wǎng)頁可以包含多個(gè)運(yùn)行在不同元素中的 AngularJS 應(yīng)用程序。

ng-app 指令定義了 AngularJS 應(yīng)用程序的根元素。
ng-app 指令在網(wǎng)頁加載完畢時(shí)會自動引導(dǎo)（自動初始化）應(yīng)用程序。

ng-init

ng-init 指令為 AngularJS 應(yīng)用程序定義了初始值。
通常情況下，不使用 ng-init。使用一個(gè)控制器或模塊來代替它。

ng-model

ng-model 指令綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)。

ng-model 指令也可以：

為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證（number、email、required）。
為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty、touched、error）。
為 HTML 元素提供 CSS 類。
綁定 HTML 元素到 HTML 表單。

ng-repeat

ng-repeat 指令對于集合中（數(shù)組中）的每個(gè)項(xiàng)會克隆一次 HTML 元素。

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 來循環(huán)數(shù)組</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環(huán)對象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

自定義指令

可以使用 .directive 函數(shù)來添加自定義的指令。

要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。

使用駝峰法來命名一個(gè)指令， zdyDirective, 但在使用它時(shí)需要以 - 分割, zdy-directive.

限制使用

restrict 值可以是以下幾種:

E 作為元素名使用 Element
A 作為屬性使用 Attribute
C 作為類名使用 Class
M 作為注釋使用 Comment
restrict 默認(rèn)值為 EA, 即可以通過元素名和屬性名來調(diào)用指令。

元素名

<body ng-app="myApp">
<zdy-directive></zdy-directive>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "E",
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

屬性名

<body ng-app="myApp">
<div zdy-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "A",
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

類名

<body ng-app="myApp">
<div class="zdy-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "C",
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

注釋

<body ng-app="myApp">
<!-- directive:zdy-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

AngularJS 模型 ng-model

【示例】

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.name="Zdy"
    });
</script>

雙向綁定

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
    {{name}}
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.name="Zdy"
    });
</script>

驗(yàn)證用戶輸入

提示信息會在 ng-show 屬性返回 true 的情況下顯示。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一個(gè)合法的郵箱地址</span>
</form>

應(yīng)用狀態(tài)

ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error)。

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>狀態(tài)</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

CSS類

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

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

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid[-key]
ng-invalid[-key] 
ng-dirty  //是否和控件進(jìn)行過交互
ng-pending
ng-pristine //是否修改過 true未修改，false修改

AngularJS Scope 作用域

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

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

Scope 可應(yīng)用在視圖和控制器上。

【示例】

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

當(dāng)在控制器中添加 $scope 對象時(shí)，視圖 (HTML) 可以獲取了這些屬性。
視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可，如： {{carname}}。

Scope概述

AngularJS 應(yīng)用組成如下：

View(視圖), 即 HTML。
Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)。
Controller(控制器), 即 JavaScript 函數(shù)，可以添加或修改屬性。

scope 是模型。

scope 是一個(gè) JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。

如果你修改了視圖，模型和控制器也會相應(yīng)更新。

Scope 作用范圍

根作用域

所有的應(yīng)用都有一個(gè) $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個(gè)應(yīng)用中。是各個(gè) controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個(gè) controller 中使用。

【示例】

<div ng-app="myApp" >
<ul ng-controller="myCtrl">
    <input type="text" ng-model="name" />{{name}}
    <li ng-repeat="x in names">{{x}}</li>
</ul>
<ul ng-controller="zdyCtrl">
    <input type="text" ng-model="name"/>{{name}}
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
app.controller('zdyCtrl',function($scope,$rootScope){
    $scope.names = ["zdy","zzz","ddd"];
    $rootScope.name="ZDY";
})
</script>

AngularJS 控制器

AngularJS 控制器控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對象。

AngularJS 控制器

AngularJS 應(yīng)用程序被控制器控制。

ng-controller 指令定義了應(yīng)用程序控制器。

控制器是 JavaScript 對象，由標(biāo)準(zhǔn)的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建。

控制器方法

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

外部文件中的控制器

<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>

【personController.js】

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

AngularJS 過濾器

過濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。

過濾器	描述
currency	格式化為貨幣格式
filter	從數(shù)組項(xiàng)中選擇一個(gè)子集
lowercase	格式化字符串為小寫
orderBy	根據(jù)某個(gè)表達(dá)式排列數(shù)組
uppercase	格式化字符串為大寫

【示例】

{{lastName|uppercase}}
{{ (quantity * price) | currency }}

【orderBy排序?qū)嵗?/p>

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

【過濾輸入】

<div ng-app="myApp" ng-controller="namesCtrl">
<p>輸入過濾:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

AngularService

AngularJS 中你可以創(chuàng)建自己的服務(wù)，或使用內(nèi)建服務(wù)。

在 AngularJS 中，服務(wù)是一個(gè)函數(shù)或?qū)ο螅稍谀愕?AngularJS 應(yīng)用中使用。

AngularJS 內(nèi)建了30 多個(gè)服務(wù)。

$location

$http

$http 是 AngularJS 應(yīng)用中最常用的服務(wù)。服務(wù)向服務(wù)器發(fā)送請求，應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

XMLHttpRequest 實(shí)例

$timeout

AngularJS $timeout 服務(wù)對應(yīng)了 JS window.setTimeout 函數(shù)。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval

AngularJS $interval 服務(wù)對應(yīng)了 JS window.setInterval 函數(shù)。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

自定義服務(wù)

【創(chuàng)建服務(wù)】

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

【使用服務(wù)】

app.controller('myCtrl', function($scope, hexafy) {  
    $scope.hex = hexafy.myFunc(255);
});

【過濾器適用自定義服務(wù)】

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

Select 選擇框

【示例1：字符串?dāng)?shù)組】

<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
    </select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

【示例2：對象數(shù)組】

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網(wǎng)址為: {{selectedSite.url}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
        {site : "Google", url : "http://www.google.com"},
        {site : "Runoob", url : "http://www.runoob.com"},
        {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>

【示例3：對象】

使用對象作為數(shù)據(jù)源, x 為鍵(key), y 為值(value)。

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你選擇的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>顏色: {{selectedCar.color}}</h3>
<p>注意選中的值是一個(gè)對象。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

表格

ng-repeat 指令可以完美的顯示表格。

排序 orderBy

orderBy : 'Country'

過濾器

{{ x.Country | uppercase }}

序號 ($index)

{{ $index + 1 }}

奇數(shù)／偶數(shù)行 even／odd

<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
    <script src="angular.min.js"></script>
    <script src="jquery.min.js"></script>
    <style>
    table, th , td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
    }
    table tr:nth-child(odd) {
      background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
      background-color: #ffffff;
    }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
    <table>
      <!-- 按照country名稱排序-->
      <tr ng-repeat="x in names | orderBy : 'Country'">
        <!-- 顯示序號 -->
        <td>{{ $index + 1 }}</td>
        <td>{{ x.Name }}</td>
        <!-- 過濾為大寫字母 -->
        <td>{{ x.Country | uppercase }}</td>
      </tr>
    </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
            var strVar="";
            strVar += "";
            strVar += " ";
            strVar += "";
            strVar += "{";
            strVar += "\"records\":[";
            strVar += "{\"Name\":\"Alfreds Futterkiste\",\"City\":\"Berlin\",\"Country\":\"Germany\"},";
            strVar += "{\"Name\":\"Ana Trujillo Emparedados y helados\",\"City\":\"México D.F.\",\"Country\":\"Mexico\"},";
            strVar += "{\"Name\":\"Antonio Moreno Taquería\",\"City\":\"México D.F.\",\"Country\":\"Mexico\"},";
            strVar += "{\"Name\":\"Around the Horn\",\"City\":\"London\",\"Country\":\"UK\"},";
            strVar += "{\"Name\":\"B's Beverages\",\"City\":\"London\",\"Country\":\"UK\"},";
            strVar += "{\"Name\":\"Berglunds snabbk?p\",\"City\":\"Lule?\",\"Country\":\"Sweden\"},";
            strVar += "{\"Name\":\"Blauer See Delikatessen\",\"City\":\"Mannheim\",\"Country\":\"Germany\"},";
            strVar += "{\"Name\":\"Blondel père et fils\",\"City\":\"Strasbourg\",\"Country\":\"France\"},";
            strVar += "{\"Name\":\"Bólido Comidas preparadas\",\"City\":\"Madrid\",\"Country\":\"Spain\"},";
            strVar += "{\"Name\":\"Bon app'\",\"City\":\"Marseille\",\"Country\":\"France\"},";
            strVar += "{\"Name\":\"Bottom-Dollar Marketse\",\"City\":\"Tsawassen\",\"Country\":\"Canada\"},";
            strVar += "{\"Name\":\"Cactus Comidas para llevar\",\"City\":\"Buenos Aires\",\"Country\":\"Argentina\"},";
            strVar += "{\"Name\":\"Centro comercial Moctezuma\",\"City\":\"México D.F.\",\"Country\":\"Mexico\"},";
            strVar += "{\"Name\":\"Chop-suey Chinese\",\"City\":\"Bern\",\"Country\":\"Switzerland\"},";
            strVar += "{\"Name\":\"Comércio Mineiro\",\"City\":\"S?o Paulo\",\"Country\":\"Brazil\"}";
            strVar += "]";
            strVar += "}";
            console.log(strVar);
            var json =JSON.parse(strVar);
            console.log (json)
            $scope.names=json.records;
        });
    </script>
</body>
</html>

表單

【實(shí)例】

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        //直接賦值“=”，會使得二者綁定在一塊，改變一個(gè)就會改變另一個(gè)
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

【表單驗(yàn)證實(shí)例】

<body>

<h2>驗(yàn)證實(shí)例</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用戶名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用戶名是必須的。</span>
</span>
</p>

<p>郵箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
<span ng-show="myForm.email.$error.email">非法的郵箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
</body>

DOM 與事件：ng-disabled,ng-show,ng-hide,ng-click

ng-disabled 指令

ng-disabled 指令直接綁定應(yīng)用程序數(shù)據(jù)到 HTML 的 disabled 屬性。

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">點(diǎn)我!</button>
</p>
<input type="checkbox" ng-model="mySwitch">按鈕
</p>
<p>
{{ mySwitch }}
</p>
</div>

ng-show 指令

ng-show 指令隱藏或顯示一個(gè) HTML 元素。

<div ng-app="">
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
</div>

ng-hide 指令

ng-hide 指令用于隱藏或顯示 HTML 元素。

<div ng-app="">
<p ng-hide="true">我是不可見的。</p>
<p ng-hide="false">我是可見的。</p>
</div>

ng-click

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">點(diǎn)我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

AngularJS 包含

<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>

AngularJS 動畫

AngularJS動畫-菜鳥教程

最后編輯于：2017.12.05 13:22:57

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,283評論 6贊 530
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 97,947評論 3贊 413
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,094評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,485評論 1贊 308
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 71,268評論 6贊 405
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 54,817評論 1贊 321
城市分裂傳說
那天，我揣著相機(jī)與錄音，去河邊找鬼。笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 42,906評論 3贊 440
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 42,039評論 0贊 285
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 48,551評論 1贊 331
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 40,502評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 42,662評論 1贊 366
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,188評論 5贊 356
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 43,907評論 3贊 345
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,304評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,563評論 1贊 281
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 51,255評論 3贊 389
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 47,637評論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

AngularJS 基礎(chǔ)

簡介

AngularJS 擴(kuò)展了 HTML

什么是AngularJS

AngularJS 指令

AngularJS 表達(dá)式

AngularJS 應(yīng)用

Angular 模塊

創(chuàng)建模塊

添加控制器

添加指令

Angular JS 表達(dá)式

數(shù)字

字符串

對象

數(shù)組

AngularJS 表達(dá)式 與 JavaScript 表達(dá)式

AngularJS API

AngularJS指令

AngularJS 指令

ng-app

ng-init

ng-model

ng-repeat

自定義指令

限制使用

元素名

屬性名

類名

注釋

AngularJS 模型 ng-model

雙向綁定

驗(yàn)證用戶輸入

應(yīng)用狀態(tài)

CSS類

AngularJS Scope 作用域

Scope概述

Scope 作用范圍

根作用域

AngularJS 控制器

AngularJS 控制器

控制器方法

外部文件中的控制器

AngularJS 過濾器

AngularService

$location

$http

$timeout

$interval

自定義服務(wù)

Select 選擇框

表格

排序 orderBy

過濾器

序號 ($index)

奇數(shù)／偶數(shù)行 even／odd

表單

DOM 與事件：ng-disabled,ng-show,ng-hide,ng-click

ng-disabled 指令

ng-show 指令

ng-hide 指令

ng-click

AngularJS 包含

AngularJS 動畫

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

AngularJS 表達(dá)式與 JavaScript 表達(dá)式