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

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

  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head>
  4.   <title>6.3css类和样式</title>
  5.   <meta charset="utf-8">
  6.   <script src="../angular.js"></script>
  7.   <script src="script.js"></script>
  8.   <style type="text/css">
  9.     li.cur {
  10.       background:#C0DCC0
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15. <div ng-controller = "Restaurant">
  16.   <ul>
  17.     <li ng-repeat="restaurant in restaurants" ng-class="{cur:$index==selRow}" ng-click="choose($index)">
  18.       <span>{{restaurant.name}}</span><span>{{restaurant.food}}</span><span>{{restaurant.price}}</span>
  19.     </li>
  20.   </ul>
  21. </div>
  22. </body>
  23. </html>
  1. function Restaurant ($scope){
  2.     $scope.selRow = null;
  3.     $scope.restaurants = [
  4.         {"name":"happy lemon","food":"greenTea","price":"￥15"},
  5.         {"name":"coco","food":"milkTea","price":"￥10"},
  6.         {"name":"good fruit","food":"fruits","price":"￥20"}
  7.     ];
  8.     $scope.choose = function(i){
  9.         $scope.selRow = i
  10.     }
  11. }
  1. ng-class="{cur:$index==selRow}":
  2.  
  3. 在这里,ng-class属性的cur类名,绑定表达式 $index==selRow,
    然后给每个li绑定点击事件回调,点击任意li,就把selRow的值变为$index.这样,当前被点击的项就会被添加类名cur,高亮显示.
    这里可以看到,angular绑定的事件回调,可以在执行的时候传入参数
  4.  
  5. 原始状态:

    点击第二项:
  6.  

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. JS模板语言不错的脚本

    <html> <script src="template.js"></script> <head> </head> &l ...

  2. 算法笔记_192:历届试题 买不到的数目(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的两种.糖果不能拆包卖. 小朋友来买糖的时候,他就用这两种包装来组合.当然有 ...

  3. PHP MySQL 连接数据库

    PHP连接MySQL的小实例 <?php  /*时间:2014-09-14  *作者:葛崇  *功能:PHP连接MySQL小实例  * */ /* SQL 脚本.直接贴到命令行运行. DROP  ...

  4. jQuery停止动画finish和stop函数区别

    stop()函数直接停止动画,finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值. 示例代码: <html> <head> <meta char ...

  5. JDK核心JAVA源代码解析（1） - Object

    想写这个系列非常久了,对自己也是个总结与提高.原来在学JAVA时.那些JAVA入门书籍会告诉你一些规律还有法则,可是用的时候我们一般非常难想起来,由于我们用的少而且不知道为什么.知其所以然方能印象深刻 ...

  6. Python C/C++ 拓展使用接口库(build-in) ctypes 使用手册

    Python C/C++ 拓展使用接口库(build-in) ctypes 使用手册 ctypes 是一个Python 标准库中的一个库.为了实现调用 DLL,或者共享库等C数据类型而设计.它可以把这 ...

  7. 转:CMake安装和使用

      CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX ...

  8. Android网络开发之基本介绍

    Android平台浏览器采用WebKit引擎,名为ChormeLite,拥有强大扩展特性,每个开发者都可以编写自己的插件. 目前,Android平台有3种网络接口可以使用,分别是:java.net, ...

  9. mysql优化不可不做的事情

    写在前面的话:总是在灾难发生后,才想起容灾的重要性:总是在吃过亏后,才记得有人提醒过 设计原则 1.不在数据库做运算:cpu计算务必移至业务层 2.控制单表数据量:单表记录控制在1000w 3.控制列 ...

  10. java第四章编程题（初学篇）

    代码: /* test.java */ package test; public class test { public static void main(String args[] ) { CPU ...