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. 这个问题获得了大量的关注 ...
随机推荐
- AtCoder Grand Contest 012 B - Splatter Painting(dp)
Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement Squid loves painting v ...
- 将原生JS和jquery里面的DOM操作进行了一下整理
创建元素节点 1.原生: document.createElement("div") 2.jquery: $("<div></div>" ...
- yum安装Development Tools报错问题
yum安装Development Tools报错问题 我们通过yum安装Development Tools开发组工具的时候,有时可能会遇到如下报错信息. [root@superdesktop ~]# ...
- 16/7/11_PHP-文件系统
读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $content = file_get_contents ...
- Vue Cli 3：创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- Java thread(3)
线程间的调度策略 通常是选择优先级高的线程,但是若发生以下情况则终止线程的运行: 1 调用yield 让出对cpu的占用权. 2 调用sleep 3 线程由于I/O操作而受阻 4 更高优先级的线 ...
- JavaScript如何获得两点之间顺时针旋转的角度
接上回:如何用javascript中的canvas让图片自己旋转 既然能够制定角度让图片旋转,那么现在要做的是自动获得旋转的角度, 让图片能够随着鼠标的方向旋转,让人物能够面朝鼠标的方向: 源代码: ...
- NGUI动态字体的创建(font maker)
1,打开font maker 2,在font maker中创建选择动态字体 PS: 1,动态字体相对静态字体来说,动态字体比较消耗性能 2,静态字体是创建在图集中,这也是没那么消耗性能的原因
- ELK + Filebeat日志分析系统安装
之前搭建过elk,用于分析日志,无奈服务器资源不足,开了多个Logstash之后发现占用内存过高,于是现在改为Filebeat做日志收集,记录一下搭建过程和遇到问题的解决方案. 第一步 , 安装jdk ...
- shell PATH示例