利用angular给节点添加样式

<!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>
时间: 2024-07-30 06:37:22

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

css 利用文档结构给列表添加样式

最近做项目,客户提出一个需求,让新闻列表的前三个条目加粗显示.由于新闻列表每天都有更新,所以就利用文档结构来给列表添加样式. 下面以一个简单列表为例,让前三列的前景色显示为红色. 首先是列表代码: <!DOCTYPE html> <html> <head> <meta charset = 'utf-8'/> <title>ul</title> </head> <body> <ul> <li&g

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

你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置: 图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的. 现在,如果我想要将字体换成红色呢,首先想到的就是去修改.label里的color属性值,可如果样式表是封装的或者外部引用的,不方便修改呢? 这时候就要用到ElementRef 和Renderer2了.可以去Angular 官网里搜索哟. renderer

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

前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕

as3.0中为TextField的文字添加样式

为TextField中文字添加样式的方式有多种,下面只说我常用的一种.通过TextField的htmlText属性及styleSheet属性来为文字添加样式.htmlText可以为文字添加标签,而styleSheet则为标签中添加的class定义样式.自摘代码片段如下: public class Main extends Sprite  { private var userNameInfo:TextField; public function Main()  { this.init(); thi

[转]用CSS给SVG &lt;use&gt;的内容添加样式

来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=referral --------------------------------------------------------------------------------------------------------------------- 一篇深入探究如何给SVG<use>元素的内容添加样

动态节点的样式

在一些节点的样式,需要js控制,如图片始终是正方形.当然,图片的正方形,可以通过后台做成一个正放心缩略图,后台改变样式文件. 那客户端的js怎么做了.其实很简单,在head添加style节点,将输入样式添加到style里. $('head').append('<style>.gq-panel .imgs.n3 img {height:' + $('.gq-panel .imgs img').width() + 'px;}</style>')

javaScript动态添加样式

[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link');  //创建link元素节点,也就是link标签 link.rel="

Angular中使用bootstrap样式

Angular中使用bootstrap样式 Angular中引入bootstrap的方法 ? 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: "styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ] 这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不

MongoDB 副本集节点添加与删除

replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 查看复制打印 repmore:PRIMARY> config = { _id:"repmore", members:[{_id:0,host:'127.0.0.1:27017',priority :2},{_id:1,host:'127.0.0.1:27018',priority:1}] };   //