<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<!--
1. Angular指令
* Angular为HTML页面扩展的: 自定义标签属性或标签
* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
* ng-app: 指定模块名，angular管理的区域
* ng-model： 双向绑定，输入相关标签
* ng-init： 初始化数据
* ng-click： 调用作用域对象的方法（点击时）
* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
* ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
* ng-show: 布尔类型， 如果为true才显示
* ng-hide: 布尔类型， 如果为true就隐藏
-->
<body ng-app="myApp">
<!--创建作用域对象MyCtrl -->
<div ng-controller="MyCtrl" ng-init="age=12">
<div>
<h2>价格计算器(自动)</h2>
数量：<input type="number" ng-model="count1">
价格：<input type="number" ng-model="price1">
<p>总计：{{count1 * price1}}</p>
</div>
<div>
<h2>价格计算器(点击按钮显示计算结果)</h2>
数量：<input type="number" ng-model="count2">
价格：<input type="number" ng-model="price2">
<button ng-click="getTotalPrice()">计算</button>
<p>总计：{{totalPrice}}</p>
</div>
<!--
* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
* $index 下标，从0开始, $first, $last, $middle除了收尾，其他属于middle, $odd, $even
-->
<h3>人员信息列表</h3>
<ul>
<!--ng-repeat="person in persons" person是循环变量，接收每次循环时得到的一个person对象-->
<li ng-repeat="person in persons">
偶数行：{{$even}},奇数行{{$odd}},中间的：{{$middle}},最后一个：{{$last}},第一个：{{$first}},第{{$index +
1}}个，{{person.name}}----{{person.age}}
</li>
</ul>
<!--ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}） -->
<!--当使用ng-bind的时候表达式不在生效-->
<p ng-bind="123">：{{'asdfdsfds'}}</p>
<p>{{count2}}</p>
<!--ng-show: 布尔类型， 如果为true才显示; ng-hide: 布尔类型， 如果为true就隐藏 -->
<button ng-click="switch()">切换</button>
<p ng-show="isLike">我喜欢贾静雯-isLike(ng-show)值为：{{isLike}}</p>
<p ng-hide="isLike">贾静雯喜欢我-isLike(ng-show)值为：{{isLike}}</p>
</div>
<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
/*
* * ng-app: 指定模块名，angular管理的区域
* ng-model： 双向绑定，输入相关标签
* ng-init： 初始化数据
* ng-click： 调用作用域对象的方法（点击时）
* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
* */
//创建模块对象
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.count1 = 1;
$scope.price1 = 20;
$scope.count2 = 2;
$scope.price2 = 30;
$scope.totalPrice = $scope.count2 * $scope.price2; //页面初始化时要显示的值
$scope.getTotalPrice = function () {
$scope.totalPrice = this.count2 * this.price2; //更改后计算新值
};
$scope.persons = [
{name: 'kobe', age: 39},
{name: 'anverson', age: 41},
{name: 'weide', age: 38},
{name: 'tim', age: 40},
{name: 'curry', age: 29}
];
$scope.isLike = true;
$scope.switch = function () {
$scope.isLike = !$scope.isLike;
}
}])
</script>
</body>
</html>
