基础知识
1. 模板
首先构建模板,然后才能使用模板
<script type="text/ng-template" id="tplbase">
姓名:{{name}},<br/>年龄:{{age}}
</script>
<div ng-include src="tplbase" ng-controller="myController"></div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name='zhangsan';
$scope.age='18';
}])
</script>
2. ng-repeat
包含以下几种专有变量:
- $first:是否首条
- $last:是否尾条
- $middle:是否中间条,除了first和last以外都是middle
- $index:索引号,从0开始
<dic ng-controller='myController'>
<ul>
<li>
<span>index</span>
<span>姓名</span>
<span>first?</span>
<span>last?</span>
<span>middle?</span>
</li>
<li ng-repeat='stu in data'>
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
<span>{{$middle?'是':'否'}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.data=[
{name:'wanger'},
{name:'zhangsan'},
{name:'lisi'},
{name:'wangwu'},
];
}])
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
3. 元素样式ng-class
以下几种方法:
(1)
控制器中:$scope.red='red';
调用:<div class='{{red}}'></div>
虽然这种方法较为简单,但并不推荐
(2)
控制器中:$scope.blnfocus='red';
调用:<div ng-class="{true:'red',false:'green'}[blnfocus]"></div>
当blnfocus值为true时,添加red,否则添加green
这种方法只能设置两种可选择的样式名称,并且注意{}[]顺序不可颠倒
(3)
控制器中:$scope.a=false;
$scope.b=true;
调用:<div ng-class="{'red':a,'green':b}"></div>
red和green为key值,a和b为value,当value值为true时,添加相应key,这种方法可实现添加多种CSS样式
另外,除了ng-class
之外,还有ng-class-odd
和ng-class-even
,如果当前是基数或者偶数项,则显示对应样式
4. 控制元素的隐藏于显示状态 (ng-show ng-hide ng-switch)
<div ng-controller="myController">
<div ng-show={{isShow}}>Show</div>
<div ng-hide={isHide}>Hide</div>
<ul ng-switch on={{switch}}>
<li ng-switch-when='1'>1</li>
<li ng-switch-when='2'>2</li>
<li ng-switch-default>default</li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.isShow=true;
$scope.isHide=false;
$scope.switch=3;
}])
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
isShow
为true
时显示ng-show
所在的项,isHide
为false
时显示ng-hide
所在的项, 因为控制器中$scope.switch=3
,页面中ng-switch-when
都不符合,所以显示最后ng-switch-default
所在的项。
5. 模板中的表单控件
angular自带的表单基本验证功能:
- $pristine: 这个单词的意思是纯朴的、原始的,表示表单或控件内容是否没有输入过
- $dirty: 表示表单或控件内容是否已经输入过,与上面的正好相反
- $valid: 表示表单或控件内容是否已经验证通过
- $invalid: 表示表单或控件内容是否未通过验证,与上面的正好相反
- $error: 表示表单或控件内容验证出错时的错误提示信息
<form name='temp_form' ng-submit='save()' ng-controller='myController'>
<input type="text" value="{{temp_form.$pristine?'表单未修改':'表单已经被修改过了'}}">
<div>
<input type="text" name='t_name' ng-model='name' required />
<span ng-show='temp_form.t_name.$error.required'>
姓名不能为空!
</span>
</div>
<div>
<input type="email" name='t_email' ng-model='email' required />
<span ng-show='temp_form.t_email.$error.required'>
邮件不能为空!
</span>
<span ng-show='temp_form.t_email.$error.email'>
邮件格式不正确!
</span>
</div>
<input type="submit" value="提交" ng-disabled="temp_form.$invalid" />
</form>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.save=function(){
console.log('提交成功!');
}
}]);
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
当最开始打开页面,不修改表单是,第一个input
显示’表单未修改’,当在表单中输入值后,将显示’表单已经被修改过了’。
当name
输入框没有输入时,显示’姓名不能为空!’。
当emial
输入框没有输入时,显示’邮件不能为空!’,当emial
输入框中的内容不符合邮件地址基本格式时,显示’邮件格式不正确!’。
当所有输入都通过验证后,提交按钮变为可用,点击提交后,控制台输出’提交成功!’。
6. 表单控件中的check &radio$ select数组数据
<form name='temp_form' ng-submit='save()' ng-controller='myController'>
<div>
<input type="checkbox" ng-model="a" ng-true-value="'同意'" ng-false-value="'不同意'" />同意
</div>
<div>
<input type="radio" ng-model='b' value='男' /> 男
<input type="radio" ng-model='b' value='女' /> 女
</div>
<div>选择的是:{{c}}</div><hr>
<div>
学制:
<select ng-model='a' ng-options='level for level in a_data' ng-change='a_change(a)'>
<option value="">--请选择--</option>
</select>
<span>{{a_show}}</span>
</div>
<div>
班级:
<select ng-model='b' ng-options='v.id as v.name group by v.grade for v in b_data' ng-change='b_change(b)'>
<option value="">--请选择--</option>
</select>
<span>{{b_show}}</span>
</div>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.a='同意';
$scope.b='男';
$scope.save=function(){
$scope.c=$scope.a+','+$scope.b;
}
$scope.a_data=['小学','初中','高中'];
$scope.b_data=[
{id:'1001',name:'(1)班',grade:'一年级'},
{id:'1002',name:'(2)班',grade:'一年级'},
{id:'2001',name:'(1)班',grade:'二年级'},
{id:'2002',name:'(2)班',grade:'二年级'},
{id:'3001',name:'(1)班',grade:'三年级'},
{id:'3002',name:'(2)班',grade:'三年级'},
];
$scope.a='';
$scope.b='';
$scope.a_change=function(a){
$scope.a_show='选择的是:'+a;
}
$scope.b_change=function(b){
$scope.b_show='选择的是:'+b;
}
}]);
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
$scope.a='同意'&$scope.b='男'
是用来初始化checkbox&radio 输入框元素的,可用不进行初始化
当勾选checkbox时,$scope.a
的值为’同意’,否则为不同意。
注意:ng-true-value
和ng-false-value
的值若只是一个简单的字符串, 则需要加两层引号包围
班级中的group by
代表通过年级分组。
除此之外,还有一个track by
属性,主要是防止值有重复,angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定,以方便追踪数据。例如:items=['a','a','b']
,这样ng-repeat='item in items'
就会出错,而用ng-repeat='(key,value) in items track by key'
就不会出现错误了,这同样可以防止因为ng-repeat
重复而发生错误。
ng-options一般有以下用法:
对于数组:
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including - a filter with track by)
对于对象:
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object