Thursday, 17 April 2014

Angular js add class to active element

Here I am going to explain how to add active class on dynamically added content or link while on clicking.

View

 
<ul>

<li ng-repeat="datalist in datalists" ng-click="select(datalist)"
                 
  ng-class="{active: isActive(datalist)}" >

 <div>{{ datalist.name }}</div> 

 </li>

 </ul> 
        
 

Controller

 

 $scope.select= function(item) {
        $scope.selected = item; 
 };

 $scope.isActive = function(item) {
        return $scope.selected === item;
 };

 
 

Click on any link, active class will be added to the active element.

Demo

Play in fiddle

But if we need to remove the active class on clicking the item again.Refer this post Add and remove active class on click Angular

Related Posts

1. Angular ng-repeate in directive

2. Loop concept in angular js

3. Angular js client side show more pagination

4. Show and Hide in angular

5. Simple client side sorting in angular

6. Add and remove active class on click Angular

7. Add a class for everything clicked - angular

8. Toggle click on dynamic menu items - Angular


21 comments :

  1. Is there a way to bring the selected item in view? Like , for a long list, the user should not scroll down to see the selected item. It should be right on the screen in view. Any help would be appreciated

    ReplyDelete
    Replies
    1. You can add some index on selected item and also add sorting on the list. So the selected items will come in top. Hope it is clear.

      Delete
  2. This helped me out . Thank you

    ReplyDelete
  3. You did make it easy, Thank you!

    ReplyDelete
  4. Thank U So sooo Much

    ReplyDelete
  5. thanks, you save me my day...

    regards.

    ReplyDelete
  6. This is the perfect web site for anyone who really wants to find out about this topic.
    You know a whole lot its almost tough to argue with yyou (not that I actually woulod
    want to…HaHa). You definitely put a fresh spin on a subject whch has been discussed for ages.
    Great stuff, just great!

    ReplyDelete
  7. I go to seee every day a ffew sites and information siters to resad articles oor reviews, however this blog presents
    quality based posts.

    ReplyDelete
  8. Great article! We will be linking to this particularly great content onn our site.
    Keeep up tthe good writing.

    ReplyDelete
  9. Hello! I could have sworn I've bewen to your bllg before but
    after looking at some of the articles I realized it's new to
    me. Anyways, I'm definitely happy I found itt and I'll be book-marking it and checking back frequently!

    ReplyDelete
  10. Com se divertindo tanto conteúdo escrito você já executa
    em qualquer questões de plagorism ou copyright violação ?
    Meu site tem um monte de exclusivo conteúdo tenho também criado me ou terceirizado,
    mas aparece muito disso é ele aparecendo tudo do web sem meu
    permissão. Você conhece algum métodos para ajudar reduzir conteúdo de ser arrancou ?
    Eu gostaria realmente agradeço.

    ReplyDelete
    Replies
    1. Não acho que haja nenhuma maneira de prevenir isso. Mas, geralmente, o ranking do google será muito baixo para esses conteúdos copiados e talvez não escolha bem pelo algoritmo de pesquisa

      Delete
  11. Very good blog! Do you have any tips and hints for aspiring
    writers? I'm planning to start my own blog soon but I'm
    a little lost on everything. Would you suggest starting with a free platform like Wordpress or
    go for a paid option? There are so many choices out
    there that I'm totally confused .. Any recommendations?
    Thanks a lot!

    ReplyDelete
  12. When someone writes an paragraph he/she keeps the idea of a
    user in his/her brain that how a user can understand it.
    Therefore that's why this article is perfect. Thanks!

    ReplyDelete
  13. tenho ficado as últimas semanas todas
    lendo seu site e encontrei muita coisa boa.

    ReplyDelete
  14. yes that was nice way to elaborate this

    ReplyDelete