<!DOCTYPE html>

<html lang="en" ng-app="myapp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/angularjs.js"></script>

    <style>

        body{

            font-size: 32px;

        }

        ul{

            list-style-type: none;

            width: 408px;

            margin:0px;

            padding: 0px;

        }

        ul .odd{

            color:#0026ff;

        }

        ul .even{

            color:#ff0000;

        }

        ul .bold{

            font-weight:bold;

            color:red;

        }

        ul li span{

            width: 52px;

            float:left;

            padding:0px 10px;

        }

        ul .focus{

            background: #cccccc;

        }

    </style>

</head>

<body>

    <div ng-controller="c2_ll">

        <ul>

            <li ng-class="{{bold}}">

                <span>1</span>

                <span>2</span>

                <span>3</span>

                <span>4</span>

                <span>5</span>

            </li>

            <li ng-class-even="even" ng-class-odd="odd" ng-repeat="stu in data" ng-click="li_click($index)" ng-class="{focus: $index==focus}">

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

            <span>{{stu.name}}</span>

            <span>{{stu.sex}}</span>

            <span>{{$first?'是':'否'}}</span>

            <span>{{$last?'是':'否'}}</span>

            </li>

        </ul>

    </div>

</body>

<script>

    var app=angular.module('myapp',[]);

    app.controller('c2_ll',function($scope){

        $scope.bold="bold";

        $scope.li_click=function(i){

            $scope.focus=i;

        };

        $scope.data=[

        {name:"11",sex:"女"},

        {name:"22",sex:"女"},

        {name:"33",sex:"男"},

        {name:"44",sex:"男"}

        ]

    })

</script>

</html>

利用angular给节点添加样式的更多相关文章

  1. Angular 4 设置组件样式的几种方式

      你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置:   图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样 ...

  2. 利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...

  3. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  4. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  5. javaScript动态添加样式

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...

  6. AngularJS添加样式

    AngularJS添加样式 通过controller.js中的某个$scope变量的值来决定div标签(或者其他html标签)的样式表. 示例 使用ng-style指令在div标签上 <body ...

  7. Angular中使用bootstrap样式

    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...

  8. MongoDB 副本集节点添加与删除

    replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 查看复制打印 rep ...

  9. js 与 jq 的节点添加删除实例

    JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf ...

随机推荐

  1. Spring+SpringMVC+Mybaties整合之配置文件如何配置及内容解释--可直接拷贝使用--不定时更改之2017/4/27

    以下配置可直接使用,只需更改包名. 关于内部标签的解释及用法,都以注解形式在代码内部说明.个人原创,转载需注明出处. 1,web.xml.添加jar包后首先需要配置WEB-INF下的web.xml文件 ...

  2. 需求收集实例三之 FM

    暂且叫这个项目叫FM.FM项目采用敏捷模式,需求的表现形式是Story. 此项目需求收集过程如下: 亮点:在公司第一次实践敏捷.用Story 而非 需求说明文档呈现需求. 败笔:没有处理好Story ...

  3. js判断字符串是否全为空(使用trim函数/正则表达式)

    我们需要判断用户输入的是否全是空格,可以使用以下方法: 方法一: 使用trim() /* 使用String.trim()函数,来判断字符串是否全为空*/ function kongge1(test) ...

  4. 将 Eclipse 的配色改为黑底白字

    1.先到 eclipsecolorthemes下载一个主题. 2.Eclipse File-->Import 3.Import视窗内选择 General-->Preferences 4.选 ...

  5. OC语言中如何在便利构造器中利用便利初始化进行初始化

    因为利用便利初始化在便利构造器中进行初始化,所以要利用便利初始化的声明及实现部分,可与前篇做比较: 1. 主函数部分: 2. 接口部分: 3. 实现部分: 4. 打印结果: 感兴趣的朋友们可自己与前面 ...

  6. java基础---->hashMap的简单分析(一)

    HashMap是一种十分常用的数据结构对象,可以保存键值对.它在项目中用的比较多,今天我们就来学习一下关于它的知识. HashMap的简单使用 一.hashMap的put和get方法 Map<S ...

  7. css之display:inline-block布局

    css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...

  8. Oracle 12C 新特性之表分区带 异步全局索引异步维护（一次add、truncate、drop、spilt、merge多个分区）

    实验准备:-- 创建实验表CREATE TABLE p_andy(ID number(10), NAME varchar2(40))PARTITION BY RANGE (id)(PARTITION ...

  9. [刷题]算法竞赛入门经典(第2版) 4-8/UVa12108 - Extraordinarily Tired Students

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa12108 - Extraordinarily Tired Stude ...

  10. Java8新特性-Lambda表达式

    1.  什么是Lambda表达式? Lambda表达式就是可以把函数作为参数传递,或者说把代码作为数据传递给函数. 2. Lambda表达式的语法格式 基本语法格式如下: 基本语法下多个变体的说明: ...