AngularJS表格基本操作

来源:互联网 发布:爱股轩是什么软件 编辑:程序博客网 时间:2024/05/14 05:00

css内容:

table, td  {  border: 1px solid grey;  border-collapse: collapse;  padding: 5px;}

HTML正文:

<body ng-app=""><div ng-init="persons=[{'name':'zhangsan','age':'20'},                     {'name':'lisi','age':'19'},                     {'name':'lisi','age':'19'}]"><table><!-- $odd:下标为奇数的元素 $even:下标为偶数的元素 -->  <tr ng-repeat="x in persons">    <td>{{$index+1}}</td>  <!-- 获取元素的下标值 -->    <!-- ng-if类似ms-if进行布尔值判断显示 -->    <td ng-if="$odd" style="background-color:yellow"> {{ x.name }}</td>    <td ng-if="$even">{{ x.name }}</td>    <td ng-if="$odd" style="background-color:green"> {{ x.age }}</td>    <td ng-if="$even">{{ x.age }}</td>  </tr></table><span>{{persons[0]}}</span>

效果:
这里写图片描述

0 0
原创粉丝点击