angularjs下ng-repeat点击元素改变样式的实现方法
1.一个angularjs的学习,了解ng-class的使用技巧;
2.代码:
html:
<div ng-repeat='myimg in myimgs'> <img ng-src="{{myimg}}" ng-click="fabricChoose($index)" ng-class="{fabricImg1:$index==fabricIsSelected}"> </div>
css:
.fabricImg1{ border:2px solid blue; }
js:
$scope.fabricChoose = function(i){ $scope.fabricIsSelected = i; }
效果就是点击选择图片 就出现蓝色border。
3.分析
ng-class的使用技巧就是 ng-class='{name:istrue}' ,在css中写.name的样式 ,当istrue布尔值为true时,此元素就会添加.name的样式,为false时,不增加这个样式。
以上这篇angularjs下ng-repeat点击元素改变样式的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
angular中实现li或者某个元素点击变色的两种方法
本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo
-
详解angular2如何手动点击特定元素上的点击事件
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能. 有没有内置的方法来做到这一点? -..如果不是,请建议我该怎么做 考虑以下代码片段 <form [ngFormModel]="imgUploadFrm" (ngSubmit)="onSubmit(imgUploadFrm)"> <br> <div class="input-field
-
angularjs下ng-repeat点击元素改变样式的实现方法
1.一个angularjs的学习,了解ng-class的使用技巧: 2.代码: html: <div ng-repeat='myimg in myimgs'> <img ng-src="{{myimg}}" ng-click="fabricChoose($index)" ng-class="{fabricImg1:$index==fabricIsSelected}"> </div> css: .fabricIm
-
jQuery实现的点击按钮改变样式功能示例
本文实例讲述了jQuery实现的点击按钮改变样式功能.分享给大家供大家参考,具体如下: 1. css代码:index4.css @CHARSET "UTF-8"; .sd{ font-weight: bold; color: black; background: red; } 2. jsp代码:index4.jsp <%@ page language="java" import="java.util.*"pageEncoding="
-
JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").css("css属性名","属性值") 如 $("span").css("color","red") 将标签为span的字体都设为红色的 $("#id") $("span"
-
点击A元素触发B元素的事件在IE8下会识别成A元素
var menuUrl = $(eventSrc).attr("navUrl"); // if (menuUrl == undefined) {//兼容IE8的$(eventSrc)识别错误,取第一个 // menuUrl = $("#left_menu-small li:first a").attr("navUrl"); // } var browser = GetIEVersion(); if (browser == "IE8&qu
-
AngularJs点击状态值改变背景色的实例
实例如下: //更改边框颜色的代码 $("#shname").css({"border":"1px solid red"}); //排序有时候下标会错乱 不建议使用 建议使用讲师排序代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type=
-
AngularJS下对数组的对比分析
Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false <script type="text/javascript"> alert([]==[]); alert([]===[]); </script> 要判断JS中的两个数组是否相同,需要先将数组转换为字符串,再作比较.以下两行代码将返回true <script type="text/javascript">
-
angularjs下拉框空白的解决办法
搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option value="-1">选择状态</option> <option value="0">
-
AngularJS的ng Http Request与response格式转换方法
本文实例讲述了AngularJS的ng Http Request与response格式转换方法.分享给大家供大家参考,具体如下: angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用.但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式. 所幸的是ng $htt
-
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="
-
鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change
随机推荐
- JavaScript设计模式之单例模式实例
- javascript unicode与GBK2312(中文)编码转换方法
- 深入分析正则表达式的子模式
- Java 中的 DataInputStream 介绍_动力节点Java学院整理
- java异常处理详细介绍及实例
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
- 详解ASP.NET MVC Form表单验证
- asp.net获取URL和IP地址的方法汇总
- asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似于QQ)
- 网页木马代码例子(里面的文件是漏洞扫描器,呵呵)
- c# 将Datatable数据导出到Excel表格中
- 给你的asp+ac站点加rss功能
- javascript实现全角半角检测的方法
- jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
- jQuery1.6 使用方法二
- 说一说java关键字final和transient
- javascript工厂模式和构造函数模式创建对象方法解析
- C#用ComboBox控件实现省与市的联动效果的方法
- C#函数式编程中的部分应用详解
- javascript每日必学之封装