AngularJS के साथ कक्षा को जोड़ने और निकालने के लिए कैसे?

Question

मेरे पास कुछ बटन हैं जो स्विचरर्स की तरह काम करते हैं। यदि आप एक क्लिक करते हैं तो यह सक्रिय हो जाता है और अन्य बटन बंद हो जाता है। मैंने jQuery का उपयोग करके ऐसा किया लेकिन AngularJS का उपयोग करना चाहूंगा। यहाँ मेरी कोड है:

एचटीएमएल

<div class="button-bar"> 
    <a class="button button-energized" id="weak">weak</a> 
    <a class="button button-energized" id="normal">normal</a> 
    <a class="button button-energized" id="strong">strong</a> 
</div> 

जावास्क्रिप्ट

.controller('AppCtrl', function($scope, $stateParams) { 

     $('#weak').click(function() { 
      $('#weak').addClass('active'); 
      $('#normal').removeClass('active'); 
      $('#strong').removeClass('active'); 
     }); 

     $('#normal').click(function() { 
      $('#normal').addClass('active'); 
      $('#weak').removeClass('active'); 
      $('#strong').removeClass('active'); 
     }); 

     $('#strong').click(function() { 
      $('#strong').addClass('active'); 
      $('#normal').removeClass('active'); 
      $('#weak').removeClass('active'); 
     }); 

    }); 

Answer 1

आप ng-click कि selected झंडा टॉगल कर सकते हैं हो सकता है, कि बाँध के लिए ng-class के साथ प्रयोग किया जा सकता है/अनबाइंड वर्ग ।

मार्कअप

<div class="button-bar"> 
    <a class="button button-energized" id="weak" 
     ng-class="{active: $parent.selected=='weak'}" ng-click="$parent.selected='weak'"> 
     weak 
    </a> 
    <a class="button button-energized" id="normal" 
     ng-class="{active: selected=='normal'}" ng-click="selected='normal'"> 
     normal 
    </a> 
    <a class="button button-energized" id="strong" 
     ng-class="{active: selected=='strong'}" ng-click="selected='strong'"> 
     strong 
    </a> 
</div> 

Working Fiddle

बेहतर तरीका

आप आसानी से ng-repeat का उपयोग कर जो कोड के अपने लाइन कम हो जाएगा कर ऐसा कर सकता है।

मार्कअप

$scope.strengths = ["weak","normal","strong"]; 

कोड

<div class="button-bar"> 
    <a class="button button-energized" id="{{strength}}" 
     ng-class="{active: $parent.selected == strength}" 
     ng-click="$parent.selected=strength" 
     ng-repeat="strength in strengths"> 
     {{strength}} 
    </a> 
</div> 

Answer 2

आप उपयोग कर सकते हैं

angular.element (document.querySelector ("# cntrlID"))। RemoveClass ("customclass");

HTML:

<div class="button-bar"> 
    <a class="button button-energized" id="weak" ng-click=removeNS()>weak</a> 
    <a class="button button-energized" id="normal" ng-click=removeWS()>normal</a> 
    <a class="button button-energized" id="strong" ng-click=removeWN()>strong</a> 
</div> 

कोणीय

$scope.removeNS = function(){ 
    angular.element(document.querySelector("#normal")).removeClass("active"); 
    angular.element(document.querySelector("#strong")).removeClass("active"); 
} 
$scope.removeWS = function(){ 
    angular.element(document.querySelector("#weak")).removeClass("active"); 
    angular.element(document.querySelector("#strong")).removeClass("active"); 
} 
$scope.removeWN = function(){ 
    angular.element(document.querySelector("#weak")).removeClass("active"); 
    angular.element(document.querySelector("#normal")).removeClass("active"); 
} 

आगे अनुकूलन करने के लिए, आप बस एक ही समारोह बना सकते हैं और क्वेरी चयनकर्ताओं गुजरती हैं और वर्ग समारोह के रूप में दूर करने के लिए कर सकते हैं पैरामीटर, जैसे:

function(id1,id2,removeClassName)