AngularJS 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。
AngularJS 实例
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>
在输入框中尝试输入:
姓名:test
你输入的为:test
数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
ng-repeat 指令会重复一个 HTML 元素:
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
AngularJS 控制器
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
#AngularJS 实例
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
用户名: <input type="text" ng-model="person.Name"><br>
密码: <input type="text" ng-model="person.password"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
Name: "John",
password: "123456"
};
}
</script>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
实例讲解 :
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性:$scope.person。
person 对象有两个属性:firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
AngularJS HTML 事件
ng-click 指令
ng-click 指令定义了一个 AngularJS 单击事件。
隐藏 HTML 元素
ng-hide 指令用于设置应用的一部分 不可见 。
ng-hide="true" 让 HTML 元素 不可见。
ng-hide="false" 让元素可见。
显示 HTML 元素
ng-show 指令可用于设置应用中的一部分可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。