编程 Javascript

AngularJS中table表格基本操作示例

Posted in Javascript onOctober 10, 2017

本文实例讲述了AngularJS表格基本操作。分享给大家供大家参考，具体如下：

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>

效果：

AngularJS中table表格基本操作示例

希望本文所述对大家AngularJS程序设计有所帮助。

AngularJS中table表格基本操作示例

- Author -

Zerone1993

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

THREE.JS入门教程(2)着色器-上

Jan 24 Javascript

jquery实现图片滚动效果的简单实例

Nov 23 Javascript

分享一些常用的jQuery动画事件和动画函数

Nov 27 Javascript

JavaScript中apply方法的应用技巧小结

Sep 29 Javascript

JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

Feb 14 Javascript

vue2.0数据双向绑定与表单bootstrap+vue组件

Feb 27 Javascript

javascript中this用法实例详解

Apr 06 Javascript

浅谈node.js 命令行工具(cli)

May 10 Javascript

vue异步axios获取的数据渲染到页面的方法

Aug 09 Javascript

layer.open关闭父窗口以及调用父页面的方法

Aug 17 Javascript

JavaScript工具库MyTools详解

Jan 01 Javascript

JavaScript 装逼指南(js另类写法)

May 10 Javascript

AngularJS中控制器函数的定义与使用方法示例

Oct 10 #Javascript

JavaScript实现计数器基础方法

Oct 10 #Javascript

JS实现合并json对象的方法

Oct 10 #Javascript

jQuery实现的form转json经典示例

Oct 10 #jQuery

JS实现websocket长轮询实时消息提示的效果

Oct 10 #Javascript

JavaScript中错误正确处理方式小结你用对了吗

Oct 10 #Javascript

vue.js实现简单轮播图效果

Oct 10 #Javascript