再来看一个选择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. Linux对文件归档和压缩(学习笔记八)

    一.归档和压缩 压缩命令工具:gzip,bzip2 归档命令工具:tar 二.压缩 2.1.gzip gzip是一种标准的.广泛应用的文件压缩和解压缩实用工具.gzip允许文件并置.用gzip压缩文件 ...

  2. Ubuntu下安装zookeeper

    1:下载安装文件 zookeeper-3.4.9.tar.gz 2:解压到以下目录 /usr/local/services/zookeeper/zookeeper-3.4.9 3:进入conf目录,复 ...

  3. 如何：在 DHTML 代码和客户端应用程序代码之间实现双向通信

    https://msdn.microsoft.com/zh-cn/library/a0746166 可以使用 WebBrowser 控件向 Windows 窗体客户端应用程序添加现有的动态 HTML ...

  4. AutoResponder Reference

    Fiddler's AutoResponder tab allows you to return files from your local disk instead of transmitting ...

  5. 简单说说Ubuntu利用bzr源码安装OpenERP7.0的操作步骤

    1.修改Ubuntu国内更新源,具体方法自己baidu.google. 修改更新源后,更新系统 sudo apt-get update sudo apt-get upgrade 复制代码 2.安装Po ...

  6. 〖Eclipse〗Eclipse实现类似于YouCompleteMe补全插件的tab选择，shift+tab反向选择，空格、回车、点号等结束选择。

    1.增加Eclipse的提示功能 在Eclipse中,从Window -> preferences -> Java -> Editor -> Content assist -& ...

  7. Adaptive Thresholding & Otsu’s Binarization

    Adaptive Thresholding Adaptive Method - It decides how thresholding value is calculated. cv2.ADAPTIV ...

  8. Jprofiler监控工具(内存泄漏)

    内存泄漏 1.测试代码 /** * JProfiler内存监控例子 * * @author yhye * @2011-11-9上午09:46:06 */ public class JProfilerM ...

  9. C#：设置焦点在最小的TabIndex控件上

    private void FocusFirstTabIndex(Control container) { // init search result varialble Control searchR ...

  10. 微信小程序横版日历，tab栏

    代码地址如下:http://www.demodashi.com/demo/14243.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...