ng-click öğesini kullanarak ng-class öğesini aktif durum sınıfında nasıl değiştirirsiniz? 'Etkin' sınıf için

<ul> 
    <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false"> 
     <img data-ng-class="{'active' : toggle}" src="" /> 
    </li> 
</ul>

CSS bootstrap değil.

Öyle ki, neredeyse istediğim yer değiştirme; Gezinme bağlantılarındaki etkin durumlara benzemeyi istiyorum. Örneğimde resimlerle uğraşmak, dolayısıyla url dizeleri, vb. Için endişelenmeniz gerekiyor.ng-click öğesini kullanarak ng-class öğesini aktif durum sınıfında nasıl değiştirirsiniz? 'Etkin' sınıf için

Bu örnekte, buradaki benzetimden yararlanmaya çalıştım (aynı mantığı denedim)) görüntüler için: ng-class to highlight active menu item based on ng-repeat. AngularJS

birisi bana doğru yönde işaret olabilir, ben çok iyi olur. : D

kaynak

2014-08-28 matenji

Ne ben senin durumundaki yapacağını o nesnenin bir propperty isteyen dizin veya ne olursa olsun ng-tekrarlama ana kapsamı içindeki nesneyi tanımlamak ve atama olduğunu. Bunun nedeni, nesnelerin javascript ile referans olarak çalıştığıdır, bu da ng-tıklamasının onu yeniden tanımlamak yerine ana kapsam özelliğini güncelleyeceği anlamına gelir. plnkr de Örnek: http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI?p=preview

<!DOCTYPE html> 
<html ng-app> 

    <head> 
    <style> 
     .active{ 
      background-color: red; 
      height: 500px; 
      width: 500px; 
     } 
    </style> 
    </head> 

    <body ng-controller="HolaCtrl"> 
    <ul> 
     <li data-ng-repeat="image in images" data-ng-click="toggleObject.item = $index">a 
     <img data-ng-class="{'active' : toggleObject.item == $index}" src="" /><br> 
     </li> 
    </ul> 
    <script> 
     function HolaCtrl($scope){ 
      $scope.images = [1,2,3]; 
      $scope.toggleObject = {item: -1}; 
     } 
    </script> 
    </body> 

</html>

Alkış

kaynak

2014-08-29 01:01:39 HeberLZ

Evet, ben kod mükemmel çalışıyor belirtti. İstenmeyen, çoklu seçimdir. Bir görüntü tıklandığında, diğer görüntü seçimi kaldırılmış olmalıdır. Sadece bu konu aktif menü öğeleri ile çalışırken gibi: http://stackoverflow.com/questions/19943217/ng-class-to-highlight-active-menu-item-based-on-ng-repeat-angularjs – matenji

TEŞEKKÜRLER! $ Index ile yanlış bir şeyler yapıyordum çünkü o nesneyi referans göstermiyordum. Çok teşekkür ederim!! :) :) – matenji

Aşağıdaki şekilde deneyebilirsiniz:

<body> 
<style> 
.blue{ 
    background:blue; 
} 
</style> 
<div ng-app='my'> 
    <div ng-controller='maincontroller as mainctrl'> 
    <div ng-repeat='item in mainctrl.arr'> 
    <p ng-class='{"blue":mainctrl.bgcolor==item}' 
    ng-click='mainctrl.addColor(item)'> 
    item {{item}} 
    </p> 

    </div> 
    </div> 
</div> 
<script> 
var app = angular.module('my',[]) 
app.controller('maincontroller',maincontroller) 
function maincontroller(){ 
var mainctrl = this; 
mainctrl.arr = [1,2,3,4,5,6]; 

mainctrl.addColor = function(data){ 
mainctrl.bgcolor = data 
} 
} 
</script> 
</body>

kaynak

2017-03-30 12:06:33

ng-click öğesini kullanarak ng-class öğesini aktif durum sınıfında nasıl değiştirirsiniz? 'Etkin' sınıf için

cevap

İlgili konular