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}">忧伤说笑</p>

在style里面设置如下：

<style type="text/css">
  .active{
   color:red;
  }
</style>

这样就会点哪个哪个变色了。

方法二：style同上，hetml如下：

  <div ng-controller="active">
  <p ng-click="isActive(1)" class="{{i==1?'active':''}}">剧情再美</p>
      <p ng-click="isActive(2)" class="{{i==2?'active':''}}">终究是戏</p>
  </div>

js代码如下：

$scope.isActive=function(i){
  $scope.i=i;
}

若想要第一个默认为有颜色的，则在js里面加如下即可：

$scope.i=1;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • Angular中自定义Debounce Click指令防止重复点击

    在这篇文章中,我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令.该指令将处理在指定时间内多次点击事件,这有助于防止重复的操作. 对于我们的示例,我们希望在产生点击事件时,实现去抖动处理.接下来我们将介绍 Directive API,HostListener API 和 RxJS 中 debounceTime 操作符的相关知识.首先,我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.

  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定 推荐button 方法一:ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明:在对应的控制器中的$scope上绑定一个t

  • Angularjs的$http异步删除数据详解及实例

    Angularjs的$http异步删除数据详解及实例 有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了. 嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑 怎么确定数据是否删除成功? 怎么同步视图的数据库的内容? 1.思路 1.实现方式一 删除数据库中对应的内容,然后将$scope中的对应的内容splice 2.实现方式二 删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要

  • Angular指令之restict匹配模式的详解

    Angular指令之restict匹配模式的详解 <body data-ng-app="myapp"> <runn2></runn2> <div data-runn2></div> <div class="runn2"></div> <!-- directive: runn2 --> <script> var app=angular.module("

  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m

  • AngularJS点击添加样式、点击变色设置的实例代码

    AngularJS点击添加样式、点击变色设置的实例代码

    本文介绍了AngularJS点击添加样式.点击变色设置的实例代码,分享给大家,具体如下: 首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢? 下面我们看代码部分 <!doctype html> <html ng-app="a2_11"> <head> <title>添加元素样式</title> <sc

  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就

  • 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

  • android中在Activity中响应ListView内部按钮的点击事件的两种方法

    最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 package com.ivan.adapter; import

  • jQuery移除或禁用html元素点击事件常用方法小结

    本文实例讲述了jQuery移除或禁用html元素点击事件常用方法.分享给大家供大家参考,具体如下: 移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法 方法一 $(this).click(function (event) { event.preventDefault(); } 方法二 $('a').live('click', function(event

  • JavaScript关于某元素点击事件的监听和触发

    JavaScript关于某元素点击事件的监听和触发

    目录 一. 触发元素同步效果 方法一: 原生JavaScript的click()点击事件 方法二:JQuery事件 — trigger()方法 二. 触发元素监听效果 方法一: 原生JavaScript监听 方法二:JQuery监听 场景:在javascript中,如果引用了某个框架中的元素,元素已在原框架实现并内置了点击事件,此时我们希望自己新建的元素的点击事件也触发和前述元素一样的效果. 举例:假设现存在元素A,元素B 方法①:元素A的点击事件会触发元素B的点击事件方法②:直接监听元素B的点

  • Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

  • Angular 向组件传递模板的两种方法

    最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时候,组件的一部分模板就需要由调用方提供. 在 React 里面,这种需求挺简单的,只要实现一个 date => Element 这样的函数就好了,但是 Angular 模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能. 第一种方式 <ng-content> <ng-conten

  • Ajax中解析Json的两种方法对比分析

    eval();  //此方法不推荐 JSON.parse();  //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name":"周星驰","age":23 }' var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法 var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方

  • ASP.Net中利用CSS实现多界面的两种方法

    本文实例讲述了ASP.Net中利用CSS实现多界面的两种方法.分享给大家供大家参考.具体实现方法如下: 可以通过使页面动态加载不同CSS来实现多界面的效果: 方法一: 复制代码 代码如下: <%@page language="C#"%> <%@import namespace="System.Data"%> <script language="c#" runat="server"> publ

  • django中使用jquery ajax post数据出现403错误的解决办法(两种方法)

    在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;

  • Access中批量替换数据库内容的两种方法

    今天遇到一个问题,一Access数据库中存放着N条文章记录,现在想替换掉这些文章中的部分内容,我们首先想到的是到网站后台去一条一条修改文章,那如果有1000篇文章,那就在网站后台改1000次,难以想象这是什么样的工作量.其实在Access数据库中可以利用SQL语句来批量替换内容,只需一句话就能解决问题,下面通过两种方法来解决此问题. 方法一:通过Access数据库中的查询分析器来修改(这里我使用的是Access 2003) 1.打开需要修改的Access数据库 2.在数据库"对象"中点

随机推荐