Develop Reference

Add class on hover on Angular JS

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>
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.
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.
Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/

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.
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 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.
* 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
var app = angular.module('yourappname', [/* add your dependencies here*/]);
//Other logic like controllers or services
And your HTML should be
<div ng-app="yourappname">
<div ng-controller="yourController">
PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS

Try using 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
$scope.hoverIn = function() {
this.applyClass = "red";
}
Working Demo

angular-slick attributes with capital case

I am making a carousel with angular-slick (https://github.com/vasyabigi/angular-slick).
Some of the slick settings for the carousel do not seem to work when used as attributes of the slick-directive. These attributes all have one or more capital case letters.
I had to change these attributes to lower case letters in slick.js and in the angular model for slick.js. For instance to get a custom button for next and previous I had to change prevArrow and NextArrow to prevarrow and nextarrow so i can use it in the following way:
<slick prevarrow='.btn-prev' nextarrow='.btn-next' arrows="true" data="windows">
<div ng-repeat="window in windows" class="slick-slide">
<a><img ng-src={{window.imageUrls[0]}}></a>
</div>
</slick>
<div class="slider-controls">
<button class="btn-next">customNext</button>
<button class="btn-prev">customPrev</button>
</div>
Changing the code in the libraries does not seem the right way to get it working. Is there some obvious mistake I made or is this just a limitation to the slick-settings one can use via the slick element ?

When you see directives with capital case like nextArrow, you must use them as
next-arrow
No need to change the library code. Angular follows same convention as CSS. When there is a capital cased directive prevArrow, in your HTML if you want to reference it, use prev-arrow.
Best example for it is:
ng-app
In your HTML you might have used it as ng-app but if you check it in the angular code, it will be ngApp

jQuery Accordion and Angular JS

I'm trying to make a jQuery accordion from an Angular JS ng-repeat directive. The code doesn't match the example in jQuery UI and it doesn't work. The element with ng-repeat appears to be messing it up. I want h3 as the title and the div below as the content. Repeat for each details.dataset. I've tried without the Ang JS command and it works, so the javascript libraries are loaded correctly.
$(document).ready(function () { $("#myAccordion").accordion(); })
<div id="myAccordion">
<div class="dockListing" ng-repeat="data in details.dataset">
<h3>{{data.name}}</h3>
<div>
<p><strong>Data 1:</strong>
{{data.content}}
</p>
</div>
</div>
</div>

here $(document).ready(...) section is loading first and it is arranging whatever it is getting inside the "#myAccordion" div in accordion format.And then the "ng-repeat" is taking place and fetching "details.dataset".So, first make sure "details.dataset" arrives first and then the " **** $("#myAccordion").accordion(); **** " fires.You can use setTimeOut(time) function or any callback function to achieve that.

AngularJS how to put both ng-class and CSS class

I have an element which has static CSS classes and dynamic classes which will be determined by a method, so how do I put them together?
I tried below code, but it does not work:
<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>
So as a workaround I did this:
<div ng-class="{'static-class': true, 'dynamic-class': isEnabled()}"></div>
But this is ugly, especially when there are many static classes.
EDIT
I found my first example works! Sorry for for this question.

Your first example should work:
<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>
Alternatively you can also use:
<div class="static-class ng-class: {'dynamic-class': isEnabled()};"></div>

bootstrap popover content setting

bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})

Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.

I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})