CODEWITHSUNDEEP
javascripthtmlangularjs
StefanBRT
StefanBRT

Reputation: 43

I need to change html class attribute for every ng-repeat element with button

i have html div where i use ng-repeat that gives me back elements from array

<div>
      <div class="col-sm-3" ng-repeat="el in vm.filmovi " id="filmovi">
          <img src="http://image.tmdb.org/t/p/w500/{{el.poster_path}}" style="width:100%;"><br>

          <a ng-click="vm.set_favorit(el)" style="cursor:hand; color:white;" uib-tooltip="Postavi u omiljene">
            <i class="glyphicon" ng-class="{'glyphicon-star-empty':el.favorit!=true, 'glyphicon-star':el.favorit==true}"
             aria-hidden="true"></i></a>

          <a href="http://www.imdb.com/title/{{el.imdb_id}}/" style="color:white;">
            <strong>{{ el.title | limitTo: 20 }}{{el.title.length > 20 ? '...' : ''}}</strong></a>
            <a class="glyphicon glyphicon-share-alt" style="margin-left:5px; color:white;"  ng-click="vm.open()"    uib-tooltip="share" ></a><br>
          {{el.popularity}} <br>
          <a style="color:white;" href="#" ng-click="vm.filter(genre)" ng-repeat="genre in el.genres"><small>{{genre.name}} </small></a>
          <div ng-init="x = 0">
            <span uib-rating ng-model="x" max="5"
              state-on="'glyphicon-star'"
              state-off="'glyphicon-star-empty'"></span></div>
      </div>
  </div>

now i created a button that changes value of id "filmovi"

<li><a href="#" ng-hide="vm.ulogovan" ng-click="vm.dugme();"  >losta</a></li>

and created function vm.dugme() that gets element by id and sets class atribute to col-sm-4

vm.dugme=function(){

    document.getElementById("filmovi").setAttribute("class","col-sm-4");

};

but when i did that only the first element changed

picture of result

but i need for all of them to change to col-sm-4 , any suggestion?

Upvotes: 2

Views: 205

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Don't do DOM manipulation from angularjs controller. Instead make use of directive provided by angular.

You could use ng-class with expression so that whenever expression gets satiesfied the class will be added over that DOM. To add class put addColSm4 flag inside a controller and change that flag from dugme method of your controller. Also by looking at screenshot it seems like you need col-sm-3 class at the beginning, afterwards you need to apply col-sm-4.

HTML

<div class="row">
      <div class="col-sm-3" ng-repeat="el in vm.filmovi"
         ng-class="{'col-sm-4': vm.addColSm4, 'col-sm-3': !vm.addColSm4 }" >

         .. Html will stay as is ..


     </div>
</div>

<li>
  <a href="#" ng-hide="vm.ulogovan" 
    ng-click="vm.dugme()">
       losta
  </a>
</li>

Code

vm.dugme = function (){
   vm.addColSm4 = true;
};

Demo Plunker

Upvotes: 2

Related Questions