我需要更改HTML類屬性對於每個NG-repeat元素與按鈕

我已經在那裏我用NG-重複，讓我回我需要更改HTML類屬性對於每個NG-repeat元素與按鈕

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

現在我創建了一個按鈕，改變的值從數組元素HTML DIV ID 「filmovi」

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

和創建的函數vm.dugme（），通過ID獲取元件並設置類屬性附加傷害到COL-SM-4

vm.dugme=function(){ 

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

};

的3210

但是當我這樣做，只是第一個元素改變

picture of result

，但我需要爲所有這些改變對col-SM-4，什麼建議嗎？

來源

2017-11-25 StefanBRT

雖然瀏覽器會容忍重複的「id」值，但它是非法的HTML。這就像有一本書有重複的頁碼，這是一個非常糟糕的做法。 – georgeawg

在AngularJS中，DOM操作只能通過指令完成。在這種情況下，使用[ng-class指令]（https://docs.angularjs.org/api/ng/directive/ngClass）來製作DOM類。 – georgeawg

不要從angularjs控制器進行DOM操作。而是使用angular提供的指令。

您可以使用帶表達式的ng-class，以便每當表達式滿意時，該類將被添加到該DOM上。要添加類addColSm4標誌在控制器中，並從您的控制器的dugme方法更改該標誌。另外通過看截圖，你似乎需要開始col-sm-3類，之後你需要申請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>

代碼

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

Demo Plunker

來源

2017-11-25 16:17:11

Downvoter： - 請隨時添加評論，我很高興知道這裏錯了什麼？ –

我沒有讓你失望，但OP *確實*要求所有* ng-repeat改變類中的元素，而不僅僅是被點擊的元素。 – georgeawg

Oh..my bad :(感謝隊友的評論，我會改變答案，我完全誤會了它 –

-1

以前的答案是正確的，但在類似的情況，如果你想使用清洗JS，看這裏。您使用JS功能document.getElementById總是找到具有選定ID的第一個元素。你可以使用class來代替id。例如，

let filmoveArr = Array.from(document.querySelectorAll('.filmovi')); 
    filmoveArr.forEach(item=>{item.classList.add('col-sm-4')})

來源

2017-11-25 16:19:06

我需要更改HTML類屬性對於每個NG-repeat元素與按鈕

回答

相關問題