刪除類AngularJS

花了一些時間尋找這個答案，抓住了幾行不同的示例代碼，它只是錯誤了。刪除類AngularJS

目標：

點擊按鈕>按鈕添加類「主動」來覈實。在div.active裏面有一個功能一個新元素，從div.active

HTML刪除。主動：

<body ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
    <button ng-click="slidePanel='active'">Open Div 1</button> 
    <div class="div1" ng-class="slidePanel"> 
     <div class="close" ng-click="removeActive()">Close</div> 
     Hi I'm a Slide Panel 
    </div> 
    </div> 
</body>

JS：

angular.module('myApp', []) 
.controller('myCtrl', ['$scope', function ($scope) { 

$scope.removeActive = function() { 

    //Errors with Element is not defined 
    /*var myEl = angular.element(element.getElementsByClassName('div1')); 
    myEl.removeClass('active');*/ 


    //Errors with myEl.removeClass is not a function 
    var myEl = document.getElementsByClassName('div1'); 
    myEl.removeClass('active'); 

    //Errors with [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! 
    /*var myEl = angular.element('div1'); 
    myEl.removeClass('active');*/ 



    //Errors with Element is not defined 
    /*var query = element[0].querySelector('.div1'); 
    var wrappedQueryResult = angular.element(query); 
    query.removeClass('active');*/ 

} 
}]);

不知道我做錯了什麼這裏。

FIDDLE

來源

2015-09-25 Full-Hybrid

被撥動類 active

如果您不想使用對象表示法（這將是我的首選方法），那麼也可以將slidePanel設置回空字符串以刪除該類。

<div class="close" ng-click="slidePanel=''">Close</div>

來源

2015-09-25 23:24:04

使用這個，問題將解決？ – rajuGT

只是試了一下，它解決了這個問題。 –

解決方法比較簡單，如果你使用對象語法ng-class

<button ng-click="slidePanel=!slidePanel">Toggle Div 1</button> 
    <div class="div1" ng-class="{active:slidePanel}"> 
     <div class="close" ng-click="slidePanel=!slidePanel">Toggle</div> 
     Hi I'm a Slide Panel 
    </div>

DOM操作不應該在一個控制器來完成。總以爲範圍首先，角有一個巨大的工具數組來管理DOM基於範圍模型

什麼ng-class="{active:slidePanel}正在做基於表達式slidePanel

DEMO

來源

2015-09-25 23:13:23 charlietfl

問題是我不能在這個特定的實例中使用'ng-click =「slidePanel =！slidePanel」'。原因是，一旦你點擊那個按鈕div.active將滑過頂部。那麼在這種情況下需要一個自定義指令？ –

我做了代碼簡化，但它也可能是一個函數也改變一個範圍變量或觸發一個事件或更新服務對象 – charlietfl

刪除類AngularJS

回答

相關問題