Thêm lớp trên di chuột vào góc JS

Question

Tôi đang cố gắng để thêm một lớp khi lơ lửng yếu tố li trong các mã dưới đây với góc

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

Đây là tất cả các chức năng trang sẽ có, vì vậy tôi mặc dù có lẽ nó không nhất thiết phải thêm một tập tin js mới cho js.

Khi chuột nhập vào li, nó sẽ có lớp mới selected. Đoạn mã trên không hoạt động, và tôi không thể hiểu tại sao.

Dưới đây là một ví dụ về mã của tôi trên một fiddle: https://jsfiddle.net/mjrmeffc/

Answer 1

Tại sao bạn cần một tập tin thêm nếu bạn có thể viết logic trong ứng dụng góc của bạn?

Tôi giả sử bạn sử dụng ứng dụng ng và có tệp javascript được gọi là nơi logic của bạn và bạn nên đưa nó vào đây.

Dưới đây là ví dụ về cách thêm/xóa lớp thích hợp.

<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 Tôi thấy điều này trong một câu hỏi khác stackoverflow, hãy sử dụng hợp lý google tìm kiếm đầu tiên, tôi không có đủ uy tín để cờ câu hỏi của bạn, hoặc để thực hiện một nhận xét.

* EDIT *

Nó có vẻ như bạn chưa quen với AngularJS. Bạn cần phải bao gồm 'app.js' hoặc 'script.js' của mình bất kể bạn muốn gọi nó là gì. Trong đó bạn xác định ứng dụng của bạn sử dụng

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

//Other logic like controllers or services 

Và HTML của bạn nên được

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

XIN định hướng cho mình đầu tiên trước khi bắt đầu đặt câu hỏi

Answer 2

Hãy thử sử dụng ng-mouseover attr

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

wri te một hàm hoverIn() trong kịch bản của bạn và gán giá trị khi di chuột qua

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

Working Demo