Angular随笔第二课

一.  列表表格以及其它迭代型元素

ng-repeat 可能是最有用的angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。不管在什么地方,只要你想创建一组事物的列表,你就可以使用这条指令。

比方说:我们正在为老师们编写一套学生花名册系统,我们当然需要从服务器上获取学生信息,但是对于当前这个列子来说,我们还是把模型直接定义在javascript代码里面:

var students =[

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

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

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

]

function student($scope) {

$scope.students = students;

}

为了显示这个学生列表,我们可以编写下面的代码:

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

 ng-repeat 将会生产标签内部所有HTMl元素的一份拷贝,包括放指令的标签。经过这样的操作之后,我们将会看到输出为(列表的形式输出):

Mary Contrary     Jack Contrary     Jill Contrary

根据具体的情况分别链接到/student/view/1    /student/view/2     /student/view/3

正如我们所看到的,修改学生信息数组将会自动刷新所渲染的列表,如果我们需要向列表中插入一条新的学生信息,可以这样写:

$scope.insert=function(){

$scope.students.splice(1,0,{name:'tom',id:'4'});

}

然后在加一个按钮在模板中调用新增的函数

<button ng-click="insert()"></button>

我们现在将会看到   Mary Contrary     Jack Contrary     Jill Contrary      tom

ng-repeat 指令可以通过$index返回当前引用的元素序号;还可以通过$first  $middle $last,ng-repeat指令返回布尔值,告诉你当前元素是否是集合中的第一个  中间的某个元素  或者最后一个元素。

你可能需要使用$index在表格张显示出行号,那么你只要编写这么一句话即可     <td>{{$index+1}}</td>

二:隐藏和显示

对于菜单 上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与angular中其他功能一样,我们通过修改数据模型的方式来驱动UI刷新,然后通过指令变更反应到UI上。

 下面的这个列子将会使用ng-show和ng-hide。这2条指令的功能是等价的,但是运行效果正好相反,它们都可以根据你所传递的表达式显示或者隐藏元素。也就是说,ng-show在表达式为true时将会显示元素,为false时将会隐藏元素。而ng-hide则恰好相反,哪一条指令更能表达你的意图,你就使用哪一条。

这2条指令的工作原理是:根据实际情况把元素的样式设置为display:block;来显示元素,设置为display:noen;来隐藏元素,设置元素为display:none来隐藏元素。接下来让我们看一个小列子。

<div ng-controller="menu" ng-app = 'myApp'>
     <button ng-click="toggle()">Toggle menu</button>
     <ul ng-show="show">
          <li ng-click="stun()">stun</li>
          <li ng-click="disin()">disin</li>
          <li ng-click="erase()">erase</li>
     </ul>
</div
<script type="text/javascript">
     angular.module('myApp',[]).controller('menu',function($scope){
          $scope.show = false;
          $scope.toggle = function () {
               $scope.show = !$scope.show;
          }
     })
     </script>

 

三. Css类和样式

你可以在你的应用中动态的设置css类和样式了,只要使用{{}}插值语法把它们进行数据绑定即可。你甚至还可以在模板中构造css类名的部分匹配方式。

.menu-disabled-true {color:gray;}
<p class="menu-disabled-{{isDisabled}}" ng-click="stun()"></p>
$scope.stun = function(){
$scope.isDisabled = 'true';
}

通过点击可以切换文字的颜色。

 

src和href的属性

 

当在<img>或者<a>标签上进行数据绑定的时候,在src或者href属性上简单使用{{}}无法很好地运行,由于浏览器会优先使用并行的方式来加载图片和其他内容,所以angular没有机会拦截到数据绑定请求。

我们可以这样使用<img>标签以及<a>标签

<img ng-src=’/image/cats/{{favoriteCat}}’>    <a ng-href=”/shop/cate={{number}}”></a>

 

表达式

在模板中使用表达式是为了以充分的灵活性在模板,业务逻辑和数据之间建立联系,同时又能避免让业务逻辑渗透到模板中。我们可以进行简单的数学运算(+,-,/,*,%),进行比较运算(==,!=,>,<,>=,<=),执行布尔逻辑(&&,||,!),以及位运算(\^,&,|),你还可以调用控制器中$scope对象上所暴露的函数,引用数组和对象符号([],{},.).

一下这些都是合法的表达式列子:

 

<div ng-controller="some">
     <div>{{number() / 10}}</div>
     <ul ng-repeat="thing in things">
          <li ng-class='{highlight : $index % 4 >= threshold($index)}'>
               {{otherfunction($index)}}
          </li>
     </ul>
</div>

posted @ 2016-03-04 15:24  Jennry  阅读(181)  评论(0编辑  收藏  举报