在Angular JS上的悬停上添加类 [英] Add class on hover on Angular JS

问题描述

当我在下面的代码中使用Angular悬停li元素时，我想添加一个类

I'm trying to add a class when hovering the li element in the code below with Angular

<li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}">
    <a href="interna.html">
        <img src="assets/images/cola.png">
    </a>
</li>

这是页面将具有的所有功能，所以我虽然不一定要为js添加新的js文件.

This is all the functionality the page will have, so I though maybe it is not necessarily to add a new js file for the js.

当鼠标进入li时，它应该具有新的类selected.上面的代码不起作用，我不知道为什么.

When the mouse enter to the li it should have the new class selected. The code above it is not working, and I cannot figure out why.

以下是我的小提琴代码示例: https://jsfiddle.net/mjrmeffc/

Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/

推荐答案

如果可以在angular应用程序中编写逻辑，为什么还需要一个额外的文件?

Why do you need an extra file if you can write the logic in your angular application?

我假设您使用ng-app并在逻辑中包含一个所谓的javascript文件，因此应将其包含在此处.

I assume you make use of ng-app and have a so called javascript file where your logic is, and you should include it in here.

以下是添加/删除类的正确方法的示例.

Here is an example of the proper way of adding/removing a class.

<div ng-app>
  <div 
    class="italic" 
    ng-class="{red: hover}" 
    ng-mouseenter="hover = true"
    ng-mouseleave="hover = false">
      Test 1 2 3.
  </div>
</div>

NB我在另一个stackoverflow问题中发现了此问题，请先正确使用google搜索，我没有足够的声誉来举报您的问题或发表评论.

NB I found this in another stackoverflow question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.

*编辑*

似乎您还不熟悉AngularJS.您需要包括"app.js"或"script.js"，无论您想调用什么.在其中，您可以使用

It seems like you're not yet familiar with AngularJS. You need to include your 'app.js' or 'script.js' whatever you want to call it. In there you define your application using

var app = angular.module('yourappname', [/* add your dependencies here*/]);

//Other logic like controllers or services

您的HTML应该是

<div ng-app="yourappname">
 <div ng-controller="yourController">

请先确定自己的位置，然后再开始提问

这篇关于在Angular JS上的悬停上添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！