<!DOCTYPE html>

 <html>

 <head lang="en">

   <meta charset="UTF-8">

   <title></title>

 </head>

 <!--

 常用指令(二)

   * ng-class: 动态引用定义的样式  {aClass:true, bClass:false}

   * ng-style: 动态引用通过js指定的样式对象   {color:'red', background:'blue'}

   * ng-click: 点击监听, 值为函数调用, 可以传$event

   * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event

   * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event

 -->

 <style>

   .evenB {

     background-color: lightsalmon;

   }

   .oddB {

     background-color: lightgreen;

   }

 </style>

 <body ng-app="myApp">

 <div ng-controller="myCtrl">

   <div style="width: 200px;height: 100px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="leave()">

   </div>

   <!--使用 ng-class 及ng-repeat自带属性 $odd $even 隔行变色-->

   <ul>

     <li ng-class="{oddB:$odd,evenB:$even}" ng-repeat="x in persons">{{x.username}} -- {{x.age}}</li>

   </ul>

 </div>

 <script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>

 <script type="text/javascript">

   angular.module('myApp', [])

     .controller('myCtrl', function ($scope) {

       $scope.myStyle = {background: 'lightgray'}; //添加初始化背景颜色

       $scope.enter = function () {

         this.myStyle.background = 'pink';//鼠标移入背景颜色

       };

       $scope.leave = function () {

         this.myStyle.background = 'lightblue';

       };

       $scope.persons=[

         {username:'kobe1',age:'39'},

         {username:'kobe2',age:'39'},

         {username:'kobe3',age:'39'},

         {username:'kobe4',age:'39'},

         {username:'kobe5',age:'39'},

       ];

     })

 </script>

 </body>

 </html>

Angular JS - 7 - Angular JS 常用指令2的更多相关文章

  1. Vue专题-js常用指令

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...

  2. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  3. Angular JS - 6 - Angular JS 常用指令

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  5. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  6. Vue.js入门及其常用指令

    一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...

  7. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  8. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

  9. 【转】Angular.js VS. Ember.js：谁将成为Web开发的新宠？

    本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js. 这个问题获得了大量的关注 ...

随机推荐

  1. mysql_DCL_grant/revoke

    授权就是为某个用户赋予某些权限.例如,可以为新建的用户赋予查询所有数据库和表的权限.合理的授权能够保证数据库的安全.不合理的授权会使数据库存在安全隐患. MySQL中使用GRANT关键字来为用户设置权 ...

  2. 001-notepad++下载安装、添加右键

    一.下载 1.1.下载地址:https://notepad-plus-plus.org/ 一般下载 /1.2 1.2.解压至指定路径下即可 1.3.注册表添加鼠标右键 添加鼠标右键, 保存成reg执行 ...

  3. jenkins持续集成、插件以及凭据

    Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins功能包括: ...

  4. quick BI 修改列名备注

    有些列名太长了,所以造成些影响.注意修改即可.

  5. sysbench - 数据库功能及性能测试工具

    sysbench 的 GitHub 参考资料 1.0 之后的版本使用方法跟之前的有所区别,下面所有内容基于 1.0.9 版本. 另外,为了方便管理测试,最好不要通过命令直接运行测试,而是写成脚本自动化 ...

  6. 爬虫之requests 请求

    1.发送不同的请求 import requests r = requests.get('https://www.baidu.com/') r = requests.post('http://httpb ...

  7. 【转载】ROS系统整体架构

    目录 1.从文件系统级理解 2.从计算图级理解 3.从开源社区级理解 由于ROS系统的组织架构比较复杂,简单从一个方面来说明很难说清楚.按照ROS官方的说法,我们可以从3个方面来理解ROS系统整体架构 ...

  8. Codeforces - 1194C - From S To T - 子序列 - 排序

    https://codeforces.com/contest/1194/problem/C 好像没什么好说的,要能构造s必须是t的子序列,并且相差的字符集合d是p的子集. 用双指针法求两遍子序列就可以 ...

  9. React入门-JSX和虚拟dom

    1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...

  10. 一个神奇却很简单的css特效

    在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的. 他这个效果就是鼠标放在左半部 ...