weitao1026
- 浏览: 1057633 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (1441)
- 软件思想&演讲 (9)
- 行业常识 (250)
- 时时疑问 (5)
- java/guava/python/php/ruby/R/scala/groovy (213)
- struct/spring/springmvc (37)
- mybatis/hibernate/JPA (10)
- mysql/oracle/sqlserver/db2/mongdb/redis/neo4j/GreenPlum/Teradata/hsqldb/Derby/sakila (268)
- js/jquery/jqueryUi/jqueryEaseyUI/extjs/angulrJs/react/es6/grunt/zepto/raphael (81)
- ZMQ/RabbitMQ/ActiveMQ/JMS/kafka (17)
- lucene/solr/nuth/elasticsearch/MG4J (167)
- html/css/ionic/nodejs/bootstrap (19)
- Linux/shell/centos (56)
- cvs/svn/git/sourceTree/gradle/ant/maven/mantis/docker/Kubernetes (26)
- sonatype nexus (1)
- tomcat/jetty/netty/jboss (9)
- 工具 (17)
- ETL/SPASS/MATLAB/RapidMiner/weka/kettle/DataX/Kylin (11)
- hadoop/spark/Hbase/Hive/pig/Zookeeper/HAWQ/cloudera/Impala/Oozie (190)
- ios/swift/android (9)
- 机器学习&算法&大数据 (18)
- Mesos是Apache下的开源分布式资源管理框架 (1)
- echarts/d3/highCharts/tableau (1)
- 行业技能图谱 (1)
- 大数据可视化 (2)
- tornado/ansible/twisted (2)
- Nagios/Cacti/Zabbix (0)
- eclipse/intellijIDEA/webstorm (5)
- cvs/svn/git/sourceTree/gradle/jira/bitbucket (4)
- jsp/jsf/flex/ZKoss (0)
- 测试技术 (2)
- splunk/flunm (2)
- 高并发/大数据量 (1)
- freemarker/vector/thymeleaf (1)
- docker/Kubernetes (2)
- dubbo/ESB/dubboX/wso2 (2)
最新评论
AngularJs动态增减class样式——ng-class
使用ng-class可以实现动态地增减样式：
[html] view plain copy
01.<!DOCTYPE html>
02.<html ng-app="formExample">
03.<head>
04. <meta charset="UTF-8">
05. <title></title>
06. <script src="../js/angular.js"></script>
07. <script>
08. angular.module('formExample', [])
09. .controller('FormController', ['$scope', function($scope)
10. {
11. }]);
12. </script>
13.
14. <style>
15. .strike {
16. text-decoration: line-through;
17. }
18. .bold {
19. font-weight: bold;
20. }
21. .red {
22. color: red;
23. }
24. </style>
25.</head>
26.<body>
27.
28.<div>
29. <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p>
30. <input type="checkbox" ng-model="deleted">添加strike样式<br>
31. <input type="checkbox" ng-model="important">添加bold样式<br>
32. <input type="checkbox" ng-model="error">添加错误样式
33. <hr>
34.
35. <p ng-class="style">使用字符串的方式</p>
36. <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red">
37. <hr>
38.
39. <p ng-class="[style1, style2, style3]">使用数组的方式</p>
40. <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br>
41. <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br>
42. <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br>
43. <hr/>
44.
45.</div>
46.</body>
47.</html>
[html] view plain copy
01.<!DOCTYPE html>
02.<html ng-app="formExample">
03.<head>
04. <meta charset="UTF-8">
05. <title></title>
06. <script src="../js/angular.js"></script>
07. <script>
08. angular.module('formExample', [])
09. .controller('FormController', ['$scope', function($scope)
10. {
11. }]);
12. </script>
13.
14. <style>
15. .strike {
16. text-decoration: line-through;
17. }
18. .bold {
19. font-weight: bold;
20. }
21. .red {
22. color: red;
23. }
24. </style>
25.</head>
26.<body>
27.
28.<div>
29. <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p>
30. <input type="checkbox" ng-model="deleted">添加strike样式<br>
31. <input type="checkbox" ng-model="important">添加bold样式<br>
32. <input type="checkbox" ng-model="error">添加错误样式
33. <hr>
34.
35. <p ng-class="style">使用字符串的方式</p>
36. <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red">
37. <hr>
38.
39. <p ng-class="[style1, style2, style3]">使用数组的方式</p>
40. <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br>
41. <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br>
42. <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br>
43. <hr/>
44.
45.</div>
46.</body>
47.</html>
分享到：
发表评论
-
JS解析json数据（如何将json字符串转化为数组）
2018-01-11 09:56 848<!DOCTYPE HTML PUBLIC &quo ... -
bootstrap-datetimepicker 日期控件的开始日期
2017-09-22 00:59 1137今天做日期控件，需求要求设置一个时间范围限制，选择从今天开始 ... -
AngularJS ng-show 指令
2017-09-26 09:50 433http://www.runoob.com/angul ... -
js 判断数组中是否包含
2017-09-15 19:35 528可以使用数组的indexOf()方法，如果返回值为-1则说 ... -
jquery中html()、text()、val()的区别
2017-09-13 16:02 783.html()用为读取和修改元素的HTML标签 对应j ... -
grunt nodejs npm的关系是什么样的？
2017-09-11 15:03 552昨天自己鼓捣grunt，开始的时候不大明白，现在好像有种模糊 ... -
grunt安装及使用
2017-09-11 14:54 1223Grunt是什么？ Grunt是一个基于JavaScri ... -
NPM是随同NodeJS一起安装的包管理工具
2017-09-11 14:22 579NPM 使用介绍 NPM是随同NodeJS一起安装的包管理 ... -
浅谈 Flash/Flex/HTML5 技术选型
2017-09-11 11:09 521在HTML5发布以前，RIA领 ... -
JSON数据的删除某个元素
2017-09-07 16:39 1100有一组JSON数据： var tempJSON = [{id ... -
JS异步加载的三种方式
2017-09-01 12:19 804一：同步加载 我们平时使用的最多的一种方式。 & ... -
Javascript异步编程的4种方法
2017-09-01 12:19 483你可能知道，Javascript ... -
AngularJS 实现按需异步加载实例代码
2017-09-01 12:19 763AngularJS 通过路由支持多视图应用， 可以根据路由 ... -
angularJS页面加载完成后调用，循环结束后调用
2017-08-31 19:19 1595angularJS页面加载完成后调用，代码如下 ... -
JS 跨域原因及其解决方案
2017-08-18 10:57 638产生跨域问题的原因 跨域问题是浏览器同源策略限制，当前域名 ... -
gRaphael——JavaScript 矢量图表库
2017-06-12 17:34 862gRaphael 是一个致力于帮 ... -
Raphael.js简易教程
2017-06-12 17:35 988Raphael.js 的教程非常简单，仅首页一段代码，然后 ... -
Zepto.js
2017-05-26 15:58 784Zepto是一个轻量级的针对现代高级浏览器的JavaScr ... -
阿里g2图表
2017-04-11 12:22 13361.百度的Echart ECharts，缩写来自Ente ... -
为什么js文件的名字像MD5运算过的一样？
2017-04-07 00:24 469这个过程叫做 revision。如果你有一个名字是 main ...
相关推荐
总的来说，`ng-class`指令是AngularJS中用于动态控制元素CSS类的关键特性，它增强了HTML的表达能力，使得开发者能够更加灵活地处理页面样式，提升用户体验。通过结合AngularJS的其他特性，如`ng-model`，我们可以...
TextStepperField-a98518f.zip】这个压缩包文件主要涉及的是iOS开发中的一个特定组件——TextStepperField，这是一个自定义UI控件，用于增强标准的UITextField功能，使得用户可以在输入文本的同时进行数值增减，常见...
本文将探讨"ios-脉冲雷达以及动态增减元素"这个项目，它使用Swift编程语言实现了雷达脉冲效果和动态元素增减的功能。该项目源代码位于名为"IOS-PulsingRadar-Swift-master"的压缩包内。 首先，脉冲雷达效果是一种...
在本项目中，我们主要探讨的是如何利用AngularJS框架实现一个动态的购物车功能，其中包含商品数量的增减以及总价的实时计算。这个功能在电商网站中非常常见，能够提供用户友好的交互体验。AngularJS是Google推出的一...
本教程将详细讲解如何使用jQuery实现动态增减选项卡的功能，这种功能常见于各种Web应用中，如浏览器界面或者自定义用户面板。 首先，我们需要创建HTML结构来承载选项卡。每个选项卡由一个标题（通常为链接）和对应...
在IT行业中，尤其是在前端开发领域，...在压缩包文件 `zztuku617` 中，可能包含了实现这一功能的示例代码、样式文件或相关资源，进一步学习和研究这些内容将有助于深入理解如何利用 JQuery EasyUI 实现动态增减选项卡。
增减水处理 2023-5-26 134249 23.xlsx
- (4) 被减数不变，减数增减，差则反向增减。 - (5) 被减数和减数同时增减相同数，差不变。 2. 比一比的方法： - (1) 通过比较符号确定大小数。 - (2) 确定合适的算式结果。 - (3) 根据加减法关系计算未知数。...
在网页开发中，JavaScript是一种必不可少的脚本语言，它能够为用户提供交互性和动态性。本文将深入探讨如何利用JavaScript来动态地添加和删除表单项，从而实现更灵活、用户友好的表单操作。 首先，我们需要了解HTML...
在IT领域，动态增减菜单是一项重要的交互设计技术，它主要应用于各种图形用户界面（GUI）和Web应用程序中。动态菜单允许用户根据需要添加、删除或修改菜单项，以提高用户体验和操作效率。这一概念主要涉及到前端开发...
在这个特定的项目中，"QT动态增减控件代码（包含交互内容）"指的是在运行时能够动态地添加或删除QT界面中的控件，同时这些控件还具有一定的交互功能，比如按钮点击、文本输入等。 在QT中，动态增减控件主要通过编程...
javascript实现的动态增减表格 dom ie
本资源“jquery动态增减选项卡.rar”聚焦于利用jQuery实现动态的选项卡（Tab）功能，这在网页设计中非常常见，用于组织和展示大量信息。选项卡通常用于将页面内容分割成多个部分，每个部分都有一个单独的标签来标识...
本程序“图像亮度增减——VC程序”正是针对这一需求而设计，旨在帮助初学者快速掌握像素级别的图像处理技术。VC++（Visual C++）是一种强大的开发环境，它可以用来编写处理图像的桌面应用程序。 亮度增减的基本原理...
月度进出口增减情况一览表2008-2020.xlsx
报告标题和描述提到了“投资策略研究系列五十九：A股的估值、风格切换与增减持”，这表明本文主要探讨了三个关键领域的投资策略：A股市场的估值变化、市场风格的转换以及产业资本的增减持行为。以下是这些知识点的...
在C++编程语言中，增减运算符是程序员日常工作中常用的工具，它们使得对变量的值进行快速增加或减少变得简单。本主题“5.4-增减运算符-副作用-vsCode-”主要关注C++中的自增（++）和自减（--）运算符，以及它们可能...
在没有`jQuery`的情况下，我们通常会使用`addEventListener()`来绑定事件，`innerHTML`或`textContent`来改变内容，以及`classList.add()`和`classList.remove()`来切换元素的CSS类以改变其样式。 `HTML5`的新特性...
### 使用VB6实现动态增减控件 在Visual Basic 6.0 (简称VB6)中，动态地创建和管理控件是一项非常实用且强大的功能。本文将详细介绍如何利用VB6来实现动态增加和删除控件的过程，并通过具体的示例代码帮助读者更好地...