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. 这个问题获得了大量的关注 ...
随机推荐
- php面试专题---13、AJAX基础内容考点
php面试专题---13.AJAX基础内容考点 一.总结 一句话总结: ajax对提升用户速度,缓解服务器压力方面也是很有可取之处的,毕竟传递的数据少了 1.AJAX基础概念? Asynchronou ...
- 小程序页面间传值（处理传值为对象，简单传值直接用options.XX的形式获取）
bookgoods:function(){ var Json = JSON.stringify(this.data.goods) wx.navigateTo({ url: '/pages/bookgo ...
- day39—JavaScript缓冲运动
转行学开发,代码100天!——2018-04-24 今天继续学习JavaScript运动之缓冲运动.相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小. 即可以表示为: ...
- 【转】PyQt5系列教程(七)控件
PyQt5系列教程(七)控件 软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...
- NaN、null、undefined的那些事
一.NaN , NaN, 'abc', false] let newArray = JSON.parse(JSON.stringify(arr)) // [1, null, 'abc', false] ...
- Vue实例1
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【ABAP系列】SAP ABAP 工单增强
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 工单增强 ...
- MySQL 查询语句--------------进阶8：分页查询
#进阶8:分页查询 /* 应用场景:要显示的数据,一页显示不全,需要分页提交sql请求 语法: select 查询列表 from 表 [join type] join 表2 on 连接条件 [wher ...
- jQuery 动态添加、删除css样式
1.addClass css中: <style type="text/css"> .chColor {background: #267cb7;color:w ...
- SQLServer2008查询时对象名无效
情况一:如果表名是关键字,查询时把表名括起来,不作为关键字使用 情况二:看左上角显示的是否是master,这是数据库的默认系统库,点选这个改成自己的即可