您的位置：首页 > Web前端 > AngularJS

AngularJS学习笔记四

2014-04-09 22:42 162 查看
列表、表格以及其他迭代元素

ng-repeat指令可以根据集合中的项目一次创建一组元素的多分拷贝。不管在什么地方，只要我们想创建一组事物的列表，我们就可以使用这条

指令。例如：

<body ng-app>

[code]    <ul ng-controller="StudentListController">

<li ng-repeat="student in students"><a href="/student/view/{{student.id}}">{{student.name}}</a></li>

</ul>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

function StudentListController($scope){

$scope.students=[

{name:'Mary Contrary',id:1},

{name:'Jack Sprat',id:2},

{name:'Jill Hill',id:3}

]

}

</script>

</body>

[/code]

结果如下：





修改学生信息数组会自动刷新渲染的列表，我们可以往列表里插入一条学生信息：

<!DOCTYPE html>

[code]<html ng-app>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body  ng-controller="StudentListController">

<ul>

<li ng-repeat="student in students"><a href="/student/view/{{student.id}}">{{student.name}}</a></li>

</ul>

<button ng-click="insertSomeOne()">Insert</button>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

function StudentListController($scope){

$scope.students=[

{name:'Mary Contrary',id:1},

{name:'Jack Sprat',id:2},

{name:'Jill Hill',id:3}

];

$scope.insertSomeOne=function(){

$scope.students.splice(1,0,{name:"someOne",id:4})

}

}

</script>

</body>

</html>

[/code]





ng-repeat指令可以通过$index返回当前引用的元素序号；还可以通过$filter、$middle及$last,ng-repeat指令返回布尔值,告诉你当前

元素是否是集合中的第一个元素、中间的某个元素，或者最后一个元素。我们可以在表格中显示出行号：

<!DOCTYPE html>

[code]<html ng-app>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<table ng-controller="StudentListController">

<tr ng-repeat="student in students">

<td>{{student.name}}</td>

<td>{{student.age}}</td>

<td>{{$index+1}}</td>

</tr>

</table>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

function StudentListController($scope){

$scope.students=[

{name:'Mary Contrary',age:12},

{name:'Jack Sprat',age:22},

{name:'Jill Hill',age:31}

];

}

</script>

</body>

</html>

[/code]





隐藏和显示

我们可以通过ng-show和ng-hide这两条指令来实现，但是运行效果正好相反，他们都可以根据你所传的表达式来显示或者隐藏元素。

ng-show在表达式为true的时候会显示元素，为false的时候会隐藏元素；而ng-hide则恰恰相反。他们的原理是根据实际情况把元素的

样式设置为display: block来显示元素；设置display: none 来隐藏元素。

CSS类和样式

我们同样可以动态设置CSS类和样式，只要使用{{}}插值语法把他们进行数据绑定即可。我们甚至可以在模板中构造CSS类名的部分匹配方式：

<!DOCTYPE html>

[code]<html ng-app>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

.menu_disabled_true{

color:gray;

}

</style>

</head>

<body>

<div ng-controller="deathrayMenuController">

    <ul>

<li class="menu_disabled_{{isDisabled}}" ng-click="stun()"></li>

</ul>

</div>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

function deathrayMenuController($scope){

$scope.stun=function(){

$scope.isDisabled="true";

}

}

</script>

</body>

</html>

[/code]

虽然这种方式具有很大灵活性，但也有一些不利的地方，在构造CSS类名时存在一定程度的间接性。当需要同时在模板和Javascript中使用时，

他很快就会变得无法维护，今儿无法正确地创建CSS。所以Angular提供了ng-class和ng-style指令。这两个指令都可以接受一个表达书，表

达式的结果可能是如下取值之一：

1.表示CSS类名的字符串，以空格分隔。

2.CSS类名数组。

3.CSS类名到布尔值的映射。

下面是个例子：

<!DOCTYPE html>

[code]<html ng-app>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

.error{

background-color: red;

}

.warning{

background-color: yellow;

}

</style>

</head>

<body>

<div ng-controller="HeaderController">

<div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>

<button ng-click="showError()">Error</button>

<button ng-click="showWarning()">Warning</button>

</div>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

function HeaderController($scope){

$scope.isError=false;

$scope.isWarning=false;

$scope.showError=function(){

$scope.messageText="This is an warning!"

$scope.isError=true;

    $scope.isWarning=false;

};

$scope.showWarning=function(){

$scope.messageText="This is an error!";

    $scope.isError=false;

$scope.isWarning=true;

}

}

</script>

</body>

</html>

[/code]

src和href属性

当在<img>或者<a>标签上进行数据绑定时，在src或者href属性上简单使用{{}}无法很好滴运行。由于浏览器会优先加载图片和其他内容，

所以Angular没有机会会拦截到数据绑定请求。我们应该使用ng-src和ng-href指令来相应的代替

区分UI和控制器的指责

控制器的职责：

1.为应用中的模型设置初始状态。

2.通过$scope对象把数据模型和函数暴露给UI。

3.监视模板其余部分的变化，并采取相应操作。

为了让控制器保持小巧和可管理状态，我们可以视图中的每一块功能区域创建一个控制器。控制器是绑定在特定的DOM片段上的，这些片段

就是要他们负责管理的内容。

利用$scope暴露模型数据

利用向控制器传递$scope对象机制，可以把模型数据暴露给视图。在应用中可能还有其他数据，但只有通过$scope触及这些数据，Angular

才会把它当作数据模型的一部分。我们可以把$scope当作一个上下文环境，他让数据的变化变得可以观察。

我们可以间接地通过模板自身创建数据模型：

1通过表达式

<button ng-click=”count=3”></button>

2在表单项上使用ng-model,唯一不同就是ng-model会在表单项和制定模型之间建立双向绑定关系。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航