AngularJS 框架（二）

本文主要参考：

https://www.runoob.com/angularjs/angularjs-tutorial.html

十、AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

使用格式：

// 简单的 GET 请求，可以改为 POST

$http({

    method: 'GET',

    url: '/someUrl'

}).then(function successCallback(response) {

        // 请求成功执行代码

    }, function errorCallback(response) {

        // 请求失败执行代码

});

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

此外还有以下简写方法：

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

$http.patch

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

http://www.runoob.com/try/angularjs/data/sites.php

{

    "sites": [

        {

            "Name": "菜鸟教程",

            "Url": "www.runoob.com",

            "Country": "CN"

        },

        {

            "Name": "Google",

            "Url": "www.google.com",

            "Country": "USA"

        },

        {

            "Name": "Facebook",

            "Url": "www.facebook.com",

            "Country": "USA"

        },

        {

            "Name": "微博",

            "Url": "www.weibo.com",

            "Country": "CN"

        }

    ]

}

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

通用方法实例

AngularJS1.5 以上版本 - 实例

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

    $http({

        method: 'GET',

        url: 'https://www.runoob.com/try/angularjs/data/sites.php'

    }).then(function successCallback(response) {

            $scope.names = response.data.sites;

        }, function errorCallback(response) {

            // 请求失败执行代码

    });

});

简写方法实例

AngularJS1.5 以上版本 - 实例

<div ng-app="myApp" ng-controller="siteCtrl">

<ul>

  <li ng-repeat="x in names">

    {{ x.Name + ', ' + x.Country }}

  </li>

</ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")

  .then(function (response) {$scope.names = response.data.sites;});

});

</script>

AngularJS1.5 以下版本 - 实例

<div ng-app="myApp" ng-controller="siteCtrl">

<ul>

  <li ng-repeat="x in names">

    {{ x.Name + ', ' + x.Country }}

  </li>

</ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")

  .success(function (response) {$scope.names = response.sites;});

});

</script>

应用解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案。

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为：  http://www.runoob.com/try/angularjs/data/sites.php。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

十一、AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

实例

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

ng-init 设置默认选中值。

ng-options 与 ng-repeat

我们也可以使用ng-repeat 指令来创建下拉列表：

实例

<select>

<option ng-repeat="x in names">{{x}}</option>

</select>

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

应该用哪个更好?

假设我们使用以下对象:

$scope.sites = [

    {site : "Google", url : "http://www.google.com"},

    {site : "Runoob", url : "http://www.runoob.com"},

    {site : "Taobao", url : "http://www.taobao.com"}

];

ng-repeat 有局限性，选择的值是一个字符串:

实例

使用 ng-repeat:

<select ng-model="selectedSite">

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

</select>

<h1>你选择的是: {{selectedSite}}</h1>

使用 ng-options 指令，选择的值是一个对象：

实例

使用 ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">

</select>

<h1>你选择的是: {{selectedSite.site}}</h1>

<p>网址为: {{selectedSite.url}}</p>

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

数据源为对象

前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

$scope.sites = {

    site01 : "Google",

    site02 : "Runoob",

    site03 : "Taobao"

};

ng-options 使用对象有很大的不同，如下所示：

实例

使用对象作为数据源, x 为键(key), y 为值(value):

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">

</select>

<h1>你选择的值是: {{selectedSite}}</h1>

你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

实例

选择的值在 key-value 对的 value 中, 这是它是一个对象:

$scope.cars = {

car01 : {brand : "Ford", model : "Mustang", color : "red"},

car02 : {brand : "Fiat", model : "500", color : "white"},

car03 : {brand : "Volvo", model : "XC90", color : "black"}

};

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：

实例

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">

</select>

十二、AngularJS 表格

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

在表格中显示数据

使用 angular 显示表格是非常简单的：

AngularJS 实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="customersCtrl">

<table>

  <tr ng-repeat="x in names">

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {  $http.get("/try/angularjs/data/Customers_JSON.php")

    .then(function (result) {

        $scope.names = result.data.records;

    });

});

</script>

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then方法替代。

如果你使用的是 v1.5 以下版本，可以使用以下代码：

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {

    $http.get("/try/angularjs/data/Customers_JSON.php")

    .success(function (response) {$scope.names = response.records;});

});

Customers_JSON.php 文件代码：

<?php

echo <<<EOT

{

"records":[

{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},

{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},

{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},

{"Name":"Around the Horn","City":"London","Country":"UK"},

{"Name":"B's Beverages","City":"London","Country":"UK"},

{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},

{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},

{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},

{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},

{"Name":"Bon app'","City":"Marseille","Country":"France"},

{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},

{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},

{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},

{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},

{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}

]

}

EOT;

?>

使用 CSS 样式

为了让页面更加美观，我们可以在页面中使用CSS：

CSS 样式

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

使用 orderBy 过滤器

排序显示，可以使用 orderBy 过滤器:

AngularJS 实例

<table>

  <tr ng-repeat="x in names | orderBy : 'Country'">

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

使用 uppercase 过滤器

使用 uppercase 过滤器转换为大写:

AngularJS 实例

<table>

  <tr ng-repeat="x in names">

    <td>{{ x.Name }}</td>

    <td>{{ x.Country | uppercase }}</td>

  </tr>

</table>

显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index:

AngularJS 实例

<table>

  <tr ng-repeat="x in names">

    <td>{{ $index + 1 }}</td>

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

使用 $even 和 $odd

AngularJS 实例

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

十三、AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据。

使用 PHP 从 MySQL 中获取数据

AngularJS 实例

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

ASP.NET 中执行 SQL 获取数据

AngularJS 实例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx")
    .success(function (response) {$scope.names = response.records;});
});
</script>

尝试一下 »

服务端代码

以下列出了几种服务端代码类型：

使用 PHP 和 MySQL。返回 JSON。

使用 PHP 和 MS Access。返回 JSON。

使用 ASP.NET, VB, 及 MS Access。 返回 JSON。

使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

跨域 HTTP 请求

如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求。

跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片，Js脚本等。

在现代浏览器中，为了数据的安全，所有请求被严格限制在同一域名下，如果需要调用不同站点的数据，需要通过跨域来解决。

十四、AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

AngularJS 实例

<div ng-app="" ng-init="mySwitch=true">

<p>

<button ng-disabled="mySwitch">点我!</button>

</p>

<p>

<input type="checkbox" ng-model="mySwitch">按钮

</p>

<p>

{{ mySwitch }}

</p>

</div>

实例讲解：

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。

如果 mySwitch 为true, 按钮将不可用:

<p>

<button disabled>点我！</button>

</p>

如果 mySwitch 为false, 按钮则可用:

<p>

<button>点我!</button>

</p>

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

AngularJS 实例

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。

你可以使用表达式来计算布尔值（ true 或 false）:

AngularJS 实例

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

Note 在下一个章节中，我们将为大家介绍更多通过点击按钮来隐藏 HTML 元素的实例。

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

AngularJS 实例

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div>

十五、AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

AngularJS 实例

<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 HTML 元素可见。

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">

名: <input type="text" ng-model="firstName"><br>

姓名: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</p>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {

    $scope.firstName = "John",

    $scope.lastName = "Doe"

    $scope.myVar = false;

    $scope.toggle = function() {

        $scope.myVar = !$scope.myVar;

    };

});

</script>

应用解析:

第一部分 personController与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见 。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{firstName + " " + lastName}}

</p>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {

    $scope.firstName = "John",

    $scope.lastName = "Doe"

    $scope.myVar = true;

    $scope.toggle = function() {

        $scope.myVar = !$scope.myVar;

    }

});

</script>

十六、AngularJS 模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

"myApp" 参数对应执行应用的 HTML 元素。

现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

AngularJS 实例

<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 控制器 章节学到更多关于控制器的知识。

添加指令

AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。

完整的指令内容可以参阅 AngularJS 参考手册。

此外，你可以使用模块来为你应用添加自己的指令：

AngularJS 实例

<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "我在指令构造器中创建!"

    };

});

</script>

你可以在 AngularJS 指令 章节学到更多关于指令的知识。

模块和控制器包含在 JS 文件中

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：

AngularJS 实例

<!DOCTYPE html>

<html>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}

</div>

<script src="myApp.js"></script>

<script src="myCtrl.js"></script>

</body>

</html>

myApp.js

var app = angular.module("myApp", []);

Note 在模块定义中 [] 参数用于定义模块的依赖关系。

中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

myCtrl.js

app.controller("myCtrl", function($scope) {

    $scope.firstName = "John";

    $scope.lastName= "Doe";

});

函数会影响到全局命名空间

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

什么时候载入库?

Note 在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。

在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：

AngularJS 实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

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

</body>

</html>

十七、AngularJS 表单

AngularJS 表单是输入控件的集合。

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

input 元素

select 元素

button 元素

textarea 元素

数据绑定

Input 控件使用 ng-model 指令来实现数据绑定。

<input type="text" ng-model="firstname">

通过以上代码应用有了一个名为 firstname 的属性。

它通过 ng-model 指令来绑定到你的应用。

firstname 属性可以在 controller 中使用：

实例

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {

    $scope.firstname = "John";

});

也可以在应用的其他地方使用:

实例

<form>

First Name: <input type="text" ng-model="firstname">

</form>

<h1>You entered: {{firstname}}</h1>

Checkbox（复选框）

checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：

实例

复选框选中后显示 h1 标签内容：

<form>

    Check to show a header:

    <input type="checkbox" ng-model="myVar">

</form>

<h1 ng-show="myVar">My Header</h1>

单选框

我们可以使用 ng-model 来绑定单选按钮到你的应用中。

单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。

实例

根据选中的单选按钮，显示信息：

<form>

    选择一个选项:

    <input type="radio" ng-model="myVar" value="dogs">Dogs

    <input type="radio" ng-model="myVar" value="tuts">Tutorials

    <input type="radio" ng-model="myVar" value="cars">Cars

</form>

myVar 的值可以是 dogs, tuts, 或 cars。

下拉菜单

使用 ng-model 指令可以将下拉菜单绑定到你的应用中。

ng-model 属性的值为你在下拉菜单选中的选项：

实例

根据选中的下拉菜单选项，显示信息：

<form>

选择一个选项:

<select ng-model="myVar">

    <option value="">

    <option value="dogs">Dogs

    <option value="tuts">Tutorials

    <option value="cars">Cars

</select>

</form>

myVar 的值可以是 dogs, tuts, 或 cars。

HTML 表单

HTML 表单通常与 HTML 控件同时存在。

AngularJS 表单实例

First Name:

John

Last Name:

Doe

RESET

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

应用程序代码

<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() {

        $scope.user = angular.copy($scope.master);

    };

    $scope.reset();

});

</script>

Note novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

实例解析

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法，且在点击按钮时调用。

novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

十八、AngularJS 输入验证

ngularJS 表单和控件可以验证输入的数据。

输入验证

在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

Note 客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

应用代码

<!DOCTYPE html>

<html>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body>

<h2>Validation Example</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 = '[email protected]';

});

</script>

</body>

</html>

Note HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件的 $dirty 或 $invalid 都为 true 时才显示。

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录