再来看一个选择li列表的例子:

点击li中的任意项,被点击的li高亮显示:

<!DOCTYPE html>

<html ng-app>

<head>

  <title>6.3css类和样式</title>

  <meta charset="utf-8">

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

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

  <style type="text/css">

    li.cur {

      background:#C0DCC0

    }

  </style>

</head>

<body>

<div ng-controller = "Restaurant">

  <ul>

    <li ng-repeat="restaurant in restaurants" ng-class="{cur:$index==selRow}" ng-click="choose($index)">

      <span>{{restaurant.name}}</span><span>{{restaurant.food}}</span><span>{{restaurant.price}}</span>

    </li>

  </ul>

</div>

</body>

</html>
function Restaurant ($scope){

    $scope.selRow = null;

    $scope.restaurants = [

        {"name":"happy lemon","food":"greenTea","price":"￥15"},

        {"name":"coco","food":"milkTea","price":"￥10"},

        {"name":"good fruit","food":"fruits","price":"￥20"}

    ];

    $scope.choose = function(i){

        $scope.selRow = i

    }

}
ng-class="{cur:$index==selRow}":

在这里,ng-class属性的cur类名,绑定表达式 $index==selRow,
然后给每个li绑定点击事件回调,点击任意li,就把selRow的值变为$index.这样,当前被点击的项就会被添加类名cur,高亮显示.
这里可以看到,angular绑定的事件回调,可以在执行的时候传入参数

原始状态:

点击第二项:

angular学习笔记(九)-css类和样式3的更多相关文章

  1. angular学习笔记(九)-css类和样式2

    在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...

  2. angular学习笔记(九)-css类和样式1

    本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式 从一个最基本的例子来看: <!DOCTYPE html> <html ng-app> <head> ...

  3. 前端学习笔记——引入css文件、样式优先级

    CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的  ...

  4. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  5. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  6. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  7. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  8. Typescript 学习笔记五：类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. 多线程学习笔记九之ThreadLocal

    目录 多线程学习笔记九之ThreadLocal 简介 类结构 源码分析 ThreadLocalMap set(T value) get() remove() 为什么ThreadLocalMap的键是W ...

随机推荐

  1. ADS中编译现存项目时常见错误：无法打开文件\…\…\2440init.o的解决办法

    错误提示如下: 解决方法: 重新编译即可.

  2. Ubuntu12.04+OpenERP6.1更改HTTP端口号为80

    在Ubuntu12.04中安装好OpenERP6.1以后,默认的端口号为8069,如果我们想改变为默认的80端口,可以通过如下方式处理. 1.首先通过iptables进行端口映射转换:sudo ipt ...

  3. Android4.0-4.4 加入实体按键振动支持的方法(java + smali版本号)

    有些手机比方泛泰A820L, 泛泰A890 A900 以及Nubia Z5S 和Z5S mini具有实体按键(这里所说的实体按键是相对于虚拟按键而言, 包括物理按键和触摸屏上多出来的触摸实体按键), ...

  4. 27、ArrayList和LinkedList的区别

    在Java的List类型集合中,ArrayList和LinkedList大概是最常用到的2个了,细看了一下它们的实现,发现区别还是很大的,这里简单的列一下个人比较关心的区别. 类声明 ArrayLis ...

  5. System.out.print实现原理猜解

    我们往往在main中直接调用System.out.print方法来打印,但是其实就这简单的一步里面有很多的玄机,因为main是static的,所以只能调用static的函数,那么print是stati ...

  6. Java内存泄露原因详解

    一.Java内存回收机制 不论哪种语言的内存分配方式,都需要返回所分配内存的真实地址,也就是返回一个指针到内存块的首地址.Java中对象是采用new或者反射的方法创建的, 这些对象的创建都是在堆(He ...

  7. Linux下安装load generator步骤及问题解决

    Linux下安装load generator步骤及问题解决 上一篇 / 下一篇  2014-08-06 18:33:00 / 个人分类:loadrunner相关 查看( 146 ) / 评论( 0 ) ...

  8. dom 解析xml文件

    JAXP技术 JAXP即Java Api for Xml Processing该API主要是SUN提供的用于解析XML数据的一整套解决方案,主要包含了DOM和SAX解析技术.大家可以参见SUN的以下两 ...

  9. SolrCloud之分布式索引及与Zookeeper的集成--转载

    原文地址:http://josh-persistence.iteye.com/blog/2234411 一.概述 Lucene是一个Java语言编写的利用倒排原理实现的文本检索类库,Solr是以Luc ...

  10. MySQL 获取子分类ID的所有父分类ID和Name的集合

    CREATE DEFINER=`sa`@`%` PROCEDURE `proc_Product_leimu_ParentIds`( IN pID INT ) BEGIN ) vars, product ...