周三的时候跟着老师简单的入门了angularjs,然后去图书馆找了一本《Angularjs实战》来看了看,虽然这本书网上的评价不太高,但对于初学者的我来说还是不错的,有较详尽的示例代码和比较清楚的代码讲解。总的来说,收获很大。
这里这里就以一些常用的html标签谈谈angularjs中的基础知识。
全局对象window
在angularjs中的全局对象window被$window所替换,也就是说在angularjs中若想使用window的方法如alert等,就需要:
$window.alert('....')这样调用
还记得刚开始接触js时,最喜欢用alert调试代码,因为他很醒目,不过这是最差的方式,console,和debugger更加优越。
ng-repeat
这是一个相当重要方便和重要的标签,和thinkphp的volist一样,不过比其还是要强大一些,它比volist多了一些属性
$first 该记录是否是首条
$last 是否是最后一条
$middle 记录是否是中间条
这些都是是则返回true,否则返回false。
然后还有一个$index 表示记录的索引号,从0开始。
ng-repeat,ng-class以及angularjs的数据双向绑定配合使用可以轻松实现一些看着比较高级的操作
点击选中效果和隔行颜色变化
代码如下:
<html ng-app="a2_11">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加元素样式</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
body {
font-size: 12px;
}
ul {
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
ul li {
float: left;
padding: 5px 0px;
}
ul .odd {
color: #0026ff;
}
ul .even {
color: #ff0000;
}
ul .bold {
font-weight: bold;
}
ul li span {
width: 50px;
float: left;
padding: 0px 10px;
}
ul .focus {
background-color: #ccc;
}
</style>
</head>
<body>
<div ng-controller="c2_11">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>是否首条</span>
<span>是否尾条</span>
</li>
<!-- ng-mouseover可替代ng-click -->
<li ng-repeat=" stu in data "
ng-class-odd="'odd'"
ng-class-even="'even'"
ng-click="li_click($index)"
ng-class="{focus: $index==focus}"
>
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
<script>
angular.module("a2_11", [])
.controller("c2_11", ['$scope', function($scope) {
$scope.bold = 'bold';
$scope.li_click = function(i){
$scope.focus = i;
};
$scope.data = [
{name: '张明明', sex: '女'},
{name: '李清思', sex: '女'},
{name: '刘小华', sex: '男'},
{name: '陈忠忠', sex: '男'}
];
}])
</script>
</body>
</html>
模表单控件
form
首先就是form表单,angularjs给与了form表单5个属性
$pristine 表示表单或控件是否未输入过
$dirty 表示是否已输入过
$valid 表示是否已验证通过
$invalid 表示是否未验证通过
$error 验证时的错误提示信息
若是能够好好利用这些信息,可以完成很多纯html较难完成的操作,如果感兴趣,就自己打印出来看看有些啥,在此不多讨论
单选框和复选框
在复选框中可以赋予其ng-true-value,ng-false-value属性,让其在选中和未选中时可以触发不同效果,其他方面没啥深究的。
select
select在angularjs中变得更加强大了,这也是本篇博客的重点,select绑定数据的形式主要有三种:
(1)绑定简单的数组数据,就和普通的select一样
(2)绑定简单的对象数据
在页面通过“ng-options”属性值,采用"...as...for...in.."格式将对象与select绑定
as前面的部分对应元素的value值,用于选中时获取,后面的用于显示
选择小学后的效果
(3)一分组的形式绑定数据
是否发现了什么不同想知道他的作用吗?
别急,下面就给你看
有了这个只有两段的级联就可以省去了。
angularjs已经用这个数组的grade值替他们分好了组了,是不是感觉很强大,angularjs还有很多强大的地方等着我们去学习,掌握它,还有更强大的angular等着我们。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。