如何使用ng-click切換ng-repeat項目中的活動狀態ng-class？

<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來自引導。

所以切換作品，這幾乎是我想要的地方;我想它類似於導航鏈接中的活動狀態，除了在我的例子中它是處理圖像，所以需要擔心url字符串等。如何使用ng-click切換ng-repeat項目中的活動狀態ng-class？

我試圖模擬這個例子在這裏找到無濟於事（我試過相同的邏輯爲圖像）：ng-class to highlight active menu item based on ng-repeat. AngularJS

如果有人能指出我在正確的方向，我將不勝感激。：D

來源

2014-08-28 matenji

我會在你的情況下做的是在該ng-repeat的父範圍內定義一個對象，並將該索引或任何你想要的屬性賦值給該對象。這是因爲對象在JavaScript中通過引用工作，這意味着ng-click將實際更新父範圍屬性而不是重新定義它。例在plnkr：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>

乾杯

來源

2014-08-29 01:01:39 HeberLZ

是啊，我說的代碼是可以正常使用。不可取的是多選。應該是，當一個圖像被點擊時，另一個圖像被取消選擇。就像這個話題處理活動菜單項：http://stackoverflow.com/questions/19943217/ng-class-to-highlight-active-menu-item-based-on-ng-repeat-angularjs – matenji 2014-08-29 02:14:57

謝謝！因爲我沒有引用該對象，所以我在$ index中做了一些錯誤。非常感謝！！ :) :) – matenji 2014-08-29 02:34:47

，您可以嘗試以下列方式：

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

來源

2017-03-30 12:06:33

如何使用ng-click切換ng-repeat項目中的活動狀態ng-class？

回答

相關問題