AngularJs
- 目录
AngularJs实战一 购物车
- 本示例用的是
angularjs v1.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<body ng-app=\'shopcar\'>
<div ng-controller=\'shopcarCtrl\'>
<h1>Your Order</h1>
<div ng-repeat=\'item in items\'>
<span>{{item.title}}</span>
<input ng-model=\'item.quantity\' />
<span ng-bind=\'item.price | currency\'></span>
<span ng-bind=\'item.price * item.quantity | currency\'></span>
<button ng-click=\'remove($index)\'>Remove</button>
<span ng-bind=\'$index\'></span>
</div>
</div>
<script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
<script>
var app = angular.module(\'shopcar\',[])
app.controller(\'shopcarCtrl\',function($scope){
$scope.items = [
{title:\'苹果\',quantity:\'2\',price:\'3.1\'},
{title:\'香蕉\',quantity:\'3\',price:\'2.1\'},
{title:\'橘子\',quantity:\'4\',price:\'1.1\'}
]
$scope.remove = function(index){
$scope.items.splice(index,1)
}
})
</script>
</body>
</html>
- 分析
-
<body ng-app=\'shopcar\'>ng-app属性(angularjs中是指令)就是告诉Angular页面中的哪一部分是需要接受angularjs来管理解析的,我们放到了body标签上就说明,body内是受angular来管理的 -
<div ng-controller=\'shopcarCtrl\'>ng-controller 属性就是用来控制之间的所有的内容,这个就是angularjs中的控制器,说白了就是一个javascript方法 -
<div ng-repeat=\'item in items\'>就是遍历,把这个标签下的所有的内容都遍历,这个标签就是当前这个div -
<span>{{item.title}}</span>通过{{ }} 把item.title的值绑定到span标签的innerHTML,如下的<span ng-bind=\'item.title\'></span>也是这个意思,但是ng-bind的好处是再网速慢的情况下不会把{{item.title}}显示出来 -
<input ng-model=\'item.quantity\' />把输入框和item.quantity的值之间创建数据绑定关系 -
<span>{{item.price | currency}}</span>其中currency就是angular内置的一个过滤器,让item.price以美元的形式显示 -
<button ng-click=\'remove($index)\'></button>ng-click则是给button添加一个点击事件,点击的时候久会调用remove方法,$index就是ng-repeat再遍历的时候的索引,从0开始,$index也就是元素的索引
-
细讲ng-repeat指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-repeat</title>
</head>
<body ng-app=\'angularrepeat\'>
<div ng-controller=\'studentsc\'>
<ul>
<li ng-repeat=\'stu in students\'>
<a href="#" ng-click=\'showinfo($index)\'>{{stu.name}}</a>
<span>
是否是第一个:{{$first}} 是否是最后一个:{{$last}} 是否是中间的一个{{$middle}} 是否是偶数位:{{$odd}} 是否是奇数位:{{$even}}
</span>
</li>
</ul>
<span ng-bind=\'stuinfo\'></span>
<button ng-click=\'insertDom()\'>Add Stu</button>
</div>
<script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
<script type="text/javascript">
var app = angular.module(\'angularrepeat\',[])
app.controller(\'studentsc\',function($scope){
$scope.students = [
{name:\'liyajie1\',age:12,id:1},
{name:\'liyajie2\',age:13,id:2},
{name:\'liyajie3\',age:14,id:3}
]
$scope.showinfo = function(index){
var s = $scope.students[index]
$scope.stuinfo = s.name+\'---\'+s.age+\'---\'+s.id;
}
$scope.insertDom = function(){
$scope.students.splice(1,0,{name:\'liyajie4\',age:14,id:4})
}
})
</script>
</body>
</html>
- 分析如上代码
- 上面的功能主要是把学生的信息都给显示出来,点击学生名字的时候下面显示对应的详细信息,点击Add Stu按钮的时候新增一个学生liyajie4
- $index:当前元素索引
number - $first 是否是第一个
boolean - $last 是否是最后一个
boolean - $middle 是否是中间的一个
boolean,如果数组是偶数个元素,则中间两个 - $even 是否是奇数位
boolean - $odd 是否是偶数位
boolean - $index是从0开始,其他的是从1开始算
ng-show和ng-hide指令
说明
-
ng-show为true的时候显示,false的时候隐藏 -
ng-hide则和ng-show相反 - 示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<style type="text/css">
.menu-disabled-true{
color:gray;
}
</style>
</head>
<body ng-app=\'showandhide\'>
<div ng-controller=\'showhidectrl\'>
<button ng-click=\'toggleMenu()\'>显示或隐藏</button>
<ul ng-show=\'menustate\'>
<li class="menu-disabled-{{isDisabled}}" ng-click="stun()">Stun</li>
<li ng-click="dis()">Dis</li>
<li ng-click="erase()">Erase</li>
</ul>
</div>
<script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
<script>
var app = angular.module(\'showandhide\',[])
app.controller(\'showhidectrl\',function($scope){
$scope.menustate = true;
$scope.toggleMenu = function(){
$scope.menustate = !$scope.menustate
}
$scope.isDisabled = false
$scope.stun = function(){
$scope.isDisabled = true;
}
})
</script>
</body>
</html>
相对来说这个指令没什么困难
ng-class样式指令
通过上面
ng-show的示例代码中也看到了,通过改变class的名字来控制文字的样式,这样是很灵活的,但是当需要再模板和javascript中使用时它就会变得无法维护,进而无法正确创建css,正式因为这个AngularJs给我们提供了ng-class和ng-style指令,如下是两个例子
1. 在页面最上方切换错误和警告消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-class 在页面头部显示错误或警告信息</title>
<style type="text/css">
body,div{
padding: 0;
margin: 0;
}
button{
width:80px;
padding: 5px 10px;
border:none;
border-radius:5px;
background-color:#0094ff;
}
.error{
height:50px;
text-align:center;
background-color:#ff0000;
}
.warning{
text-align:center;
height:50px;
background-color:#FF8000;
}
</style>
</head>
<body ng-app=\'ngclass\'>
<div ng-controller=\'ngctrl\'>
<div ng-class=\'{error:isError,warning:isWarning}\'>{{msg}}</div>
<button ng-click=\'showerror()\'>Error</button>
<button ng-click=\'showwarn()\'>Warning</button>
</div>
<script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
<script>
var app = angular.module(\'ngclass\',[])
app.controller(\'ngctrl\',function($scope){
$scope.showerror = function(){
$scope.isError = true;
$scope.isWarning = false;
$scope.msg = \'这是错误消息\';
}
$scope.showwarn = function(){
$scope.isError = false;
$scope.isWarning = true;
$scope.msg = \'这是警告消息\';
}
})
</script>
</body>
</html>
2. 选中行后变颜色
...