AngularJS表格样式简单设置方法示例

2024-09-26 22:23:44

本文实例讲述了AngularJS表格样式简单设置方法。分享给大家供大家参考，具体如下：

1、问题背景

AngularJS表格table，利用样式设置表格间隔色

2、实现源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AngularJS之表格设置样式</title>
    <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
      table,th,td{
        border-collapse: collapse;
      }
      table tr:nth-child(even){
        background-color: #F7E1B5;
      }
      table tr:nth-child(odd){
        background-color: #F1F1F1;
      }
    </style>
  </head>
  <body>
    <div ng-app="tableStyleApp" ng-controller="tableStyleController">
      <table class="table table-bordered table-condensed">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2016010101</td>
            <td>张峰</td>
            <td>23</td>
          </tr>
          <tr>
            <td>2016010102</td>
            <td>李思思</td>
            <td>22</td>
          </tr>
          <tr>
            <td>2016010103</td>
            <td>华章</td>
            <td>21</td>
          </tr>
          <tr>
            <td>2016010104</td>
            <td>孙海</td>
            <td>22</td>
          </tr>
          <tr>
            <td>2016010105</td>
            <td>胡迪</td>
            <td>20</td>
          </tr>
          <tr>
            <td>2016010106</td>
            <td>升比</td>
            <td>25</td>
          </tr>
          <tr>
            <td>2016010107</td>
            <td>柳丝丝</td>
            <td>24</td>
          </tr>
          <tr>
            <td>2016010108</td>
            <td>王武</td>
            <td>22</td>
          </tr>
          <tr>
            <td>2016010109</td>
            <td>诸葛云</td>
            <td>21</td>
          </tr>
          <tr>
            <td>2016010110</td>
            <td>刘云</td>
            <td>22</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

3、实现结果：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

如何用angularjs制作一个完整的表格

由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件. 整体代码预览: HTML: <!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> //
angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. HTML: <!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver
AngularJS表格添加序号的方法

本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h
详解AngularJS中的表格使用

表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>
妙用Angularjs实现表格按指定列排序

使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d
AngularJS中的Directive自定义一个表格

先给大家说下表格的需求: ● 表格结构 <table> <thead> <tr> <th>Name</th> <th>Street</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>></td> <td>></td> <td>>
AngularJS实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""
AngularJS中table表格基本操作示例

本文实例讲述了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'
AngularJS表格样式简单设置方法示例

本文实例讲述了AngularJS表格样式简单设置方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格table,利用样式设置表格间隔色 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格设置样式</title> <link rel="stylesheet" h
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例

本文实例讲述了PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法.分享给大家供大家参考,具体如下: 1.如何在php中把驼峰样式的字符串转换成下划线样式的字符串.例:输入是FooBar的话,输出则是foo_bar 以下是用正则的方式去完成,既然用到正则,方法肯定就不只一种,我们看下下面的方式 echo strtolower(preg_replace('/(?<=[a-z])([A-Z])/', '_$1', 'fooBar')); //output:foo_bar echo &quo
Android编程之手机壁纸WallPaper设置方法示例

本文实例讲述了Android编程之手机壁纸WallPaper设置方法.分享给大家供大家参考,具体如下: /** * Andorid设置手机屏幕的壁纸 * * @description: * @author ldm * @date 2016-5-4 下午3:08:56 */ public class SetWallpaperActivity extends Activity { // WallpaperManager类:系统壁纸管理.通过它可以获得当前壁纸以及设置指定图片作为系统壁纸. priva
Android开发之组件GridView简单使用方法示例

本文实例讲述了Android开发之组件GridView简单使用方法.分享给大家供大家参考,具体如下: 案例:简单的图片浏览器,保存图片到相册保存图片到相册方法代码:https://www.jb51.net/article/158668.htm 废话不多说先上效果: 具体实现: 首先是布局文件: 1.一个GridView(展示所有的图片) 2.一个ImageView(放选中的图片) <?xml version="1.0" encoding="utf-8"?&
PHP工厂模式简单实现方法示例

本文实例讲述了PHP工厂模式简单实现方法.分享给大家供大家参考,具体如下: 工厂模式是一种类,建立了一个工厂来根据所需来创建对象,这种方式在多态性编程中是很重要的,允许动态替换类,修改配置等. php示例代码如下: //-----------------------------工厂模式-------------------------// class A{ public $class; // public $class = $_GET['c']; //类名 public $method; //
YII2框架中验证码的简单使用方法示例

本文实例讲述了YII2框架中验证码的简单使用方法.分享给大家供大家参考,具体如下: 验证码的使用是比较频繁的.YII2中已经帮我们做好了封装. 首先我们在控制器里创建一个actions方法,用于使用yii\captcha\CaptchaAction <?php namespace app\controllers; use YII; use yii\web\Controller; class IndexController extends Controller { public function
PHP 对象接口简单实现方法示例

本文实例讲述了PHP 对象接口简单实现方法.分享给大家供大家参考,具体如下: 对象接口 (interface) 使用接口(interface),可以指定某个类必须实现哪些方法,但不需要定义这些方法的具体内容. 接口是通过 interface 关键字来定义的,就像定义一个标准的类一样,但其中定义所有的方法都是空的. 接口中定义的所有方法都必须是公有,这是接口的特性. 实现(implements) 要实现一个接口,使用 implements 操作符.类中必须实现接口中定义的所有方法,否则会报一个致命
AngularJS全局警告框实现方法示例

本文实例讲述了AngularJS全局警告框实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
JS二叉树的简单实现方法示例

本文实例讲述了JS二叉树的简单实现方法.分享给大家供大家参考,具体如下: 今天学习了一下二叉树的实现,在此记录一下简单的二叉树实现,并且实现升序和降序排序输出 function Node(data , left,right){ this.data = data; this.left = left; this.right = right; this.show = show; function show(){ return this.data; } }; function Bst(){ this

AngularJS表格样式简单设置方法示例

相关推荐

随机推荐