<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!--AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。-->
<div>
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<br /><hr />
<!--AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。-->
<div ng-init="firstName1='John'">
<p>姓名为 <span ng-bind="firstName1"></span></p>
</div>
<br /><hr />
<!--AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。-->
<div data-ng-app="" data-ng-init="firstName2='John 12'">
<p>姓名为 <span data-ng-bind="firstName2"></span></p>
</div>
<br /><hr />
<!--AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}-->
<div>
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<br />
<!--AngularJS 数字-->
<div ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>
<br />
<!--AngularJS 数字-->
<div ng-app="" ng-init="quantity1=20;cost1=5">
<p>总价： <span ng-bind="quantity1 * cost1"></span></p>
</div>
<br />
<!--AngularJS 字符串-->
<div ng-app="" ng-init="firstNamea='John';lastNamea='Doe'">
<p>姓名： {{ firstNamea + " " + lastNamea }}</p>
</div>
<br />
<!--AngularJS 对象-->
<div ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
<br />
<!--AngularJS 数组-->
<div ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
<br /><hr />
<!--AngularJS 指令
数据绑定-->
<div ng-init="quantityb=1;priceb=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantityb">
价格： <input type="number" ng-model="priceb">
<p><b>总价：</b> {{ quantityb * priceb }}</p>
</div>
<br />
<!--重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素-->
<div ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<br />
<!--ng-repeat 指令用在一个对象数组上：-->
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<br /><hr />
<!--AngularJS 控制器
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。-->
<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
<br /><hr />
<br /><hr />
<br /><hr />
<br /><hr />
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!--AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。-->
<div>
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<br /><hr />
<!--AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。-->
<div ng-init="firstName1='John'">
<p>姓名为 <span ng-bind="firstName1"></span></p>
</div>
<br /><hr />
<!--AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。-->
<div data-ng-app="" data-ng-init="firstName2='John 12'">
<p>姓名为 <span data-ng-bind="firstName2"></span></p>
</div>
<br /><hr />
<!--AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}-->
<div>
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<br />
<!--AngularJS 数字-->
<div ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>
<br />
<!--AngularJS 数字-->
<div ng-app="" ng-init="quantity1=20;cost1=5">
<p>总价： <span ng-bind="quantity1 * cost1"></span></p>
</div>
<br />
<!--AngularJS 字符串-->
<div ng-app="" ng-init="firstNamea='John';lastNamea='Doe'">
<p>姓名： {{ firstNamea + " " + lastNamea }}</p>
</div>
<br />
<!--AngularJS 对象-->
<div ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
<br />
<!--AngularJS 数组-->
<div ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
<br /><hr />
<!--AngularJS 指令
数据绑定-->
<div ng-init="quantityb=1;priceb=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantityb">
价格： <input type="number" ng-model="priceb">
<p><b>总价：</b> {{ quantityb * priceb }}</p>
</div>
<br />
<!--重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素-->
<div ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<br />
<!--ng-repeat 指令用在一个对象数组上：-->
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<br /><hr />
<!--AngularJS 控制器
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。-->
<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
<br /><hr />
<br /><hr />
<br /><hr />
<br /><hr />
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</body>
</html>
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
