如何在點擊添加一個類到AngularJS的父元素？

我的HTML如下：如何在點擊添加一個類到AngularJS的父元素？

<div class="cell"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCtrlStuff()"></i> 
    </div> 
</div>

當您單擊<i>，我想一個active類添加到具有.cell當前父。這對於AngularJS是如何實現的？

來源

2013-10-04 Shamoon

只是建議一個快字：下次不問1個問題，然後問又在一些註釋，尤其是當你似乎已經知道你有兩個問題。把它們放在原來的文章中，這樣人們可以幫助你更輕鬆。 –

OK，根據你過去的評論，如果你的細胞在一個循環中，你應該在你的問題中提到這一點。我會假設你使用ng-repeat。

我有這樣的工作。如果您點擊另一個，active類也會被刪除。

HTML：

<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}"> 
    <div class="offset-container pull-left"> 
     <i data-ng-click="activate($index)">Activate Me</i> 
    </div> 
</div>

控制器：

$scope.activate= function(index){ 
     $scope.index=index; 
    };

來源

2013-10-04 16:33:17 NicolasMoise

你搖滾！謝謝，這正是我需要的 – Shamoon

@NicolasMose有沒有辦法刪除活動類，如果再次點擊相同的按鈕（切換類 - 添加和刪除）？ – Syed

@NicolasMose我按照上面的要求對代碼進行了更改。我在這裏得到了答案：http：// stackoverflow。com/questions/38620253/how-to-add-active-class-this-parent-on-child-button-is-clicked-and-toggle – Syed

<div class="cell" ng-class="{'active': isActive}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="isActive = !isActive"></i> 
    </div> 
</div>

來源

2013-10-04 16:06:15 Max

這裏有一種方法，使用ng-class

<div class="cell" ng-class="{'active': isActive==true}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCtrlStuff()">clicky</i>  
    </div> 
</div>

控制器：

function MyCtrl($scope) { 
    $scope.doCtrlStuff = function(){ 
     $scope.isActive = true; 
    }    
}

來源

2013-10-04 16:09:31 kmdsax

如何在單擊一個單元格時將所有其他單元格設置爲不活動？ – Shamoon

取決於你的代碼是如何設置的。你可以添加你的示例代碼，以便我們可以確切地看到你正在嘗試完成什麼？ – kmdsax

從這裏你可以這樣做：http://docs.angularjs.org/api/ng.directive:ngClass

<div data-ng-class="{cell:true, active:clickedIcon}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCtrlStuff()"></i> 
    </div> 
</div>

你可以使用一個類：布爾ng類表達式的模式。

而在你的控制器：

$scope.doCtrlStuff = function() { 
    $scope.clickedIcon = true; 
}

UPDATE：

如果你想要做一個單選按鈕：

<div data-ng-class="{cell:true, active:clickedDogIcon}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doDogStuff()"></i> 
    </div> 
</div> 
<div data-ng-class="{cell:true, active:clickedCatIcon}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCatStuff()"></i> 
    </div> 
</div> 

$scope.doDogStuff = function() { 
    $scope.clickedDogIcon = true; 
    $scope.clickedCatIcon = false; 
} 
$scope.doCatStuff = function() { 
    $scope.clickedDogIcon = false; 
    $scope.clickedCatIcon = true; 
}

來源

2013-10-04 16:11:30 programmerdave

如何從其他'cell's中刪除'active'類？ – Shamoon

我會爲每個家長有一個不同的變量。所以你可以做clickedIcon1，clickedIcon2等等，並將其他設置爲false，這樣ng-class會在它們爲false時刪除這個類。 – programmerdave

'細胞'是在一個循環。所以我不能做的1,2,3等方法 – Shamoon

如何在點擊添加一個類到AngularJS的父元素？

回答

相關問題