Angular JS - 7 - Angular JS 常用指令2
<!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的更多相关文章
- Vue专题-js常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- Angular JS - 6 - Angular JS 常用指令
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue.js介绍，常用指令，事件，以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- Vue.js入门及其常用指令
一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...
- 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 的目的是 ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- 【转】Angular.js VS. Ember.js：谁将成为Web开发的新宠？
本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js. 这个问题获得了大量的关注 ...
随机推荐
- Docker容器内部端口映射到外部宿主机端口
Docker允许通过外部访问容器或者容器之间互联的方式来提供网络服务.容器启动之后,容器中可以运行一些网络应用,通过-p或-P参数来指定端口映射. 注意:宿主机的一个端口只能映射到容器内部的某一个端口 ...
- jajaj
Docs » 第二章:字符串和文本 » 2.2 字符串开头或结尾匹配 Edit on GitHub 2.2 字符串开头或结尾匹配¶ 问题¶ 你需要通过指定的文本模式去检查字符串的开头或者结尾,比如文件 ...
- 安装依赖的时候，报错npm WARN checkPermissions
解决办法1 . 删除node_modules文件夹,重新安装依赖. 解决办法2 . 统一使用同一个npm安装依赖 . 原因:有的依赖包是用npm安装的,有的依赖包是用cnpm安装的.
- 关于linq中的dbml文件中的对象加s去s的问题
点击工具->选项->数据库工具->O/R Designer ,右面有个启用,如果是true
- 140、spring webflux 高并发的spring组件
最近公司可谓是风云变幻,年前说要拆开卖,后来说要整体卖,表示像我这种渣渣,始终逃脱不掉被卖的命运 下面进入正题 spring webflux 是spring 支持的高并发web框架,将每个http请求 ...
- Openstack_SQLAlchemy 修改数据库的表结构
目录 目录 前言 更改数据库的方法 为数据库添加一张或多张新表 删除一张或多张表 为旧表添加一个字段 为旧表更新一个字段 为旧表初始化一条新的记录 最后 前言 SQLAlchemy 的使用方法和相关基 ...
- 05 | 基础篇：某个应用的CPU使用率居然达到100%，我该怎么办？
通过前两节对平均负载和 CPU 上下文切换的学习,我相信你对 CPU 的性能已经有了初步了解.不过我还是想问一下,在学这个专栏前,你最常用什么指标来描述系统的 CPU 性能呢?我想你的答案,可能不是平 ...
- IDF-CTF-图片里的英语 writeup
题目链接:http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=34 一恒河沙中有三千世界,一张图里也可以有很多东西. ...
- JNDI配置笔记
先在tomcat Context.xml配置文件中配置 <Resource name="jdbc/elifecrm" type="javax.sql.DataSou ...
- JavaScript实现的发布/订阅(Pub/Sub)模式
JavaScript实现的发布/订阅(Pub/Sub)模式 时间 2016-05-02 18:47:58 GiantMing's blog 原文 http://giantming.net/java ...