表达式
(1) 语法：{
{expression}}
(2) 作用：显示表达式的结果数据
(3) 注意：表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
(4) 表达式操作的数据
- 基本类型数据: number、string、boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<p>{
{123}}</p>
<p>{
{"abc"}}</p>
<p>{
{true}}</p>
</div>
<script type='text/javascript' src='./angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
// 创建模块对象
angular.module('myApp',[])
.controller('MyCtrl',['$scope',function($scope){
}])
</script>
</body>
</html>
- undefined、Infinity、NaN、null解析为空串: “”，不显示任何效果
<p>-----{
{undefine}}******</p>
<p>-----{
{infinity}}******</p>
<p>-----{
{NaN}}******</p>
<p>-----{
{null}}******</p>
- 对象的属性或方法
eg：实现字符串的反转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<p>{
{abc}}</p>
<p>{
{abc.split('')}}</p>
<p>{
{abc.split('').reverse()}}</p>
<p>{
{abc.split('').reverse().join('')}}</p>
</div>
<script type='text/javascript' src='./angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
// 创建模块对象
angular.module('myApp',[])
.controller('MyCtrl',['$scope',function($scope){
$scope.abc = "abcdef"
}])
</script>
</body>
</html>
- 数组
常用指令
指令1
ng-app：指定模块名，angular管理的区域ng-model：双向绑定，输入相天标签ng-init：初始化数据ng-click：调用作用域对象的方法（点击时)
使用方法：
ng-click = "触发的函数名()"
ng-controller：指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的)ng-bind:解决使用{ {}}（表达式）显示数据闪屏（闪屏：在很短时间内显示未解析的表达式{ {变量名}})
使用{ {}}会出现浏览器闪屏的问题，因为开始解析页面的时候还没加载Angular，就会将{ {}}当成普通的文本进行解析，当加载到AngularJS的时候才会当成表达式进行解析。所以就会出现闪屏。
ng-bind使用方法：
ng-bind="要在页面显示的内容"
使用ng-bind可以解决闪屏问题的原因：
浏览器从上向下加载的时候第一遍只会加载标签体中的内容，标签的属性会忽略不解析。当angularJS加载完成之后再将ng-bind的中进行解析显示，这样用户起码不会看到闪屏的原始表达式。
ng-repeat:遍历数组显示数据，数组有几个元素就会产生几个新的作用域
ng-repeat="遍历变量名 in 数组名"
ng-repeat的属性：$index,$first, $Last，$middle, $odd，$even
- ng-show:布尔类型，如果为true才显示
- ng-hide:布尔类型，如果为true就隐藏
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp">
<div ng-controller = "MyCtrl">
<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">
<!-- ng-click ：调用作用域对象的方法（点击时) -->
<button ng-click = "getTotalPrice()">计算</button>
<p>总计：{
{totalPrice}}</p>
</div>
<!-- ng-repeat:~遍历数组显示数据，数组有几个元素就会产生几个新的作用域 -->
<div>
<h2>人员信息列表</h2>
<ul>
<li ng-repeat="person in persons">
{
{$middle}}——{
{$index}}——{
{person.username}}——{
{person.age}}
</li>
</ul>
</div>
<!-- bind -->
<div>
<p>{
{123}}</p>
<p ng-bind="123"></p>
</div>
<!--
- ng-show:布尔类型，如果为true才显示
- ng-hide:布尔类型，如果为true就隐藏
-->
<div>
<button ng-click = "switchIs()">切换显示</button>
<p ng-show = "is">yang_ng-show</p>
<p ng-hide = "is">yang_ng-hide</p>
</div>
</div>
<script type='text/javascript' src='./angular/angular-1.5.5/angular.js'></script>
<script>
// 创建模块
angular.module('myApp',[])
.controller('MyCtrl',function ($scope){
$scope.price1 = 20
$scope.count1 = 1
$scope.price2 = 20
$scope.count2 = 1
$scope.totalPrice = 20
$scope.getTotalPrice = function (){
$scope.totalPrice=$scope.price2*$scope.count2
}
// 人员数据
$scope.persons = [
{
username:'yang1',age:18},
{
username:'yang2',age:18},
{
username:'yang3',age:18},
{
username:'yang4',age:18},
{
username:'yang5',age:18},
]
$scope.is = true
$scope.switchIs=function(){
$scope.is = !$scope.is
}
})
</script>
</body>
</html>
指令2
ng-class：动态引用定义的样式
{aClass:true，bClass:false}ng-style：动态引用通过js指定的样式对象
ng-style对应的内容是一个对象。
eg:
ng-style="{color : 'red' , background : 'blue'}"
注意：在JS中属性值要使用字符串表示，否则会解析成变量名。
ng-click:点击监听，值为函数调用，可以传$eventng-mouseenter:鼠标移入监听，值为函数调用，可以传$eventng-mouseleave:鼠标移出监听，值为函数调用，可以传$event
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.evenB{
background: darksalmon;
}
.oddB{
background: darkseagreen;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller = "MyCtrl">
<!-- ng-style：动态引用通过js指定的样式对象 -->
<div style="width: 200px;height: 200px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave = "leave()"></div>
<ul>
<li ng-class="{oddB:$odd,evenB:$even}" ng-repeat="person in persons">{
{person.username}}——{
{person.age}}</li>
</ul>
</div>
<script type='text/javascript' src='./angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
angular.module('myApp',[])
.controller('MyCtrl',function ($scope){
$scope.myStyle ={
background:'darksalmon'
}
$scope.enter = function (){
this.myStyle.background = 'pink'
}
$scope.leave = function (){
this.myStyle.background = 'darksalmon'
}
// 人员数据
$scope.persons = [
{
username:'yang1',age:18},
{
username:'yang2',age:18},
{
username:'yang3',age:18},
{
username:'yang4',age:18},
{
username:'yang5',age:18},
]
})
</script>
</body>
</html>
一个作用域的注意点
在angularJS构造函数中需要传递一个参数$scope，为其添加属性的时候我们一般使用$scope.属性，当在构造函数中中定义函数需要用到添加的属性的时候，也需要写全称$scope.属性，否则就会到windows中寻找属性，发现找不到。
即：
$scope.is = true
$scope.switchIs=function(){
$scope.is = !$scope.is
}
这是正确写法，但是不可以写成下面这种情况：
$scope.is = true
$scope.switchIs=function(){
$scope.is = !is
}
练习
我的笔记
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp">
<div ng-controller = "MyCtrl">
<h2>我的笔记</h2>
<textarea cols="30" rows="10" ng-model="message"></textarea>
<div>
<button ng-click="save()">保存</button>
<button ng-click="read()">读取</button>
<button ng-click="remove()">删除</button>
</div>
<p>剩余的字数:{
{getCount()}}</p>
</div>
<script type='text/javascript' src='../../angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript' src='./app.js'></script>
</body>
</html>
app.js
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
// 初始化message
$scope.message=''
// 计算剩余字数
$scope.getCount = function () {
// 判断用户输入的内容长度
if ($scope.message.length > 100) {
$scope.message = $scope.message.slice(0,100)
}
return 100 - $scope.message.length
}
// 保存
$scope.save = function () {
alert('note is saved')
// 使用localStorage存储数据
// 转化成JSON数据寻出更安全
localStorage.setItem('note_key', JSON.stringify($scope.message))
$scope.message=''
}
// 读取
$scope.read = function (){
$scope.message = JSON.parse(localStorage.getItem('note_key') || '[]')
//||'[]'是处理用户输入为空的情况
}
// remove
$scope.remove = function (){
localStorage.removeItem('note_key')
$scope.message=''
}
}])
我的备忘录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp">
<div ng-controller = "myCtrl">
<h2>我的备忘录</h2>
<div>
<input type="text" ng-model="newTodo">
<button ng-click="add()">添加</button>
</div>
<div ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.isChecked">
<span>{
{todo.name}}</span>
</div>
<button ng-click="del()">删除选中</button>
</div>
<script type='text/javascript' src='../../angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript' src='./app.js'></script>
</body>
</html>
app.js
angular.module('myApp', [])
.controller('myCtrl',function ($scope){
$scope.todos = [
{
name: '吃饭', isChecked: false },
{
name: '睡觉', isChecked: true },
{
name: '打豆豆', isChecked: false },
]
$scope.add = function () {
if (!$scope.newTodo) {
alert("添加的内容不能为空")
return;
}
var obj = {
name: $scope.newTodo,
isChecked:false
}
// unshift添加到前面,unshift的返回值是数组的长度
$scope.todos.unshift(obj)
$scope.newTodo = ''
}
// $scope.del=function (){
// $scope.todos.forEach(function (item, index) {
// if (item.isChecked) {
// $scope.todos.splice(index, 1);
// $scope.del()
// }
// }
// )
// }
$scope.del = function () {
var oldTodo = $scope.todos;
$scope.todos = []
oldTodo.forEach(function (item,index){
if (!item.isChecked) {
// 将为选中的留下来
$scope.todos.push(item)
}
})
}
})
输出：
