在Angular JS上悬停时添加类

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

我正在尝试使用Angular将li元素悬停在下面的代码中时添加一个类

<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>

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.

这是页面将具有的所有功能,因此我可能不一定为js添加新的js文件。

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.

当鼠标进入li时,它应该选择新的类。它上面的代码不起作用,我无法弄清楚原因。

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

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

2 个解决方案

#1

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

如果您可以在角度应用程序中编写逻辑,为什么还需要额外的文件?

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.

我假设你使用ng-app并且有一个所谓的javascript文件,你的逻辑是,你应该把它包含在这里。

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 I found this in another * question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.

注意我在另一个*问题中发现了这个问题,请先正确使用谷歌搜索,我没有足够的声誉来标记你的问题,或发表评论。

* EDIT *

*编辑*

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

看来你还不熟悉AngularJS。您需要包含您的'app.js'或'script.js',无论您想要调用它。在那里,您可以使用定义应用程序

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

//Other logic like controllers or services

And your HTML should be

你的HTML应该是

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

PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS

在您开始提出问题之前,请先自行定位自己

#2

Try using ng-mouseover attr

尝试使用ng-mouseover attr

<li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}">

write a function hoverIn() in your script and assign value when hover over

在脚本中编写一个函数hoverIn(),并在悬停时指定值

$scope.hoverIn = function() {
    this.applyClass = "red";
}

Working Demo

#1