Unable to add and remove class when using ng-repeat
I am using the following plugin in my application: http://firedev.com/jquery.keynav/
my json file:
[
{
"appName": "Some name",
"appDesc": "Some Description",
},
{
"appName": "Other name",
"appDesc": "Other Description",
}
]
my html with angular:
<li ng-repeat="app in apps">
<a class="selected" href="#">
<p>{{app.appName}}</p>
<span>{{app.appDesc}}</span>
</a>
</li>
my html without angular:
<li>
<a class="selected" href="#">
<p>Some name</p>
<span>Some Description</span>
</a>
</li>
<li>
<a class="" href="#">
<p>Other name</p>
<span>Other Description</span>
</a>
</li>
Question: Angular is showing list items in my json file just fine. However, when adding an angular class, it doesn't add / remove the "selected" class. When I use static html it adds / removes the selected class. I tried adding ng-repeat in the tag and in the tag before the list, but still the same question. I also tried adding the "selected" ass class (since the first one is in static html), but then all elements get that class.
I would really appreciate it if someone with experience could help me with this really annoying problem.
source to share
As stated in the documentation you were referring to, just don't install the selected class at all. Then, by default, it will choose the first one for you.
<li ng-repeat="app in apps">
<a href="#">
<p>{{app.appName}}</p>
<span>{{app.appDesc}}</span>
</a>
</li>
Alternatively you can use $first
to apply the class to only the first link.
<li ng-repeat="app in apps">
<a href="#" ng-class='{selected:$first}'>
<p>{{app.appName}}</p>
<span>{{app.appDesc}}</span>
</a>
</li>
Third option
I suspect that when you call the $('a').keynav();
DOM is not displayed yet. To fix this, you can use $ timeout to delay the code until the ng-repeat has run.
app.controller("myController", function($scope, $timeout){
$scope.apps =
[
{
"appName": "Some name",
"appDesc": "Some Description",
},
{
"appName": "Other name",
"appDesc": "Other Description",
}
];
$timeout(function () {
$('#navigation a').keynav();
})
})
My guess is that if you want to be true, because this is DOM manipulation, you should encapsulate it inside a directive. But I'll leave it up to you.
(By popularity)Working example:
https://jsbin.com/tejecizeqi/2/edit?html,css,js,output
The styles are a bit funky and I had to copy all the keynav library code. You can scroll to the bottom of the JS plane to see my code.
I had to tweak the css a bit to make it visible, but you probably don't need a real project.
First you need to click on the black plane to give it focus. Again, you won't need this in a real application.
source to share