नियंत्रक

Question

के माध्यम से कोणीय में कक्षा बदलें, कृपया मुझे कोणीय और नियंत्रक का उपयोग करके गतिशील [प्रकार = बटन] इनपुट की श्रेणी बदलने में मदद करें।

app.controller('anodekeypadcntrl',function($scope){ 
 
\t 
 
\t 
 
\t $scope.clickTwentyFour = function(event){ 
 
\t In this function I need to highlight the button (adding the .active class to it) \t 
 
\t }; 
 
\t        
 
});

<div class="keypadcontainer" ng-controller="anodekeypadcntrl as child"> 
 
    ------ 
 
    <input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton" 
 
\t ng-click="clickTwentyFour($event)" /> 
 
    ------------- 
 
</div>

Answer 1

आप इस के लिए ngClass उपयोग कर सकते हैं। अपने मार्कअप में बस की तरह कुछ कार्य करें:

<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton" 
ng-click="clickTwentyFour($event)" ng-class="myDynamicClass" /> 

इस तरह आप myDynamicClass सेट कर सकते हैं होने के लिए या तो एक एक CSS वर्ग या अपने नियंत्रक से सीधे तार की एक सरणी युक्त स्ट्रिंग

// controller code 
$scope.myDynamicClass = 'some-css-class'; 

यह मिल जाएगा एचटीएमएल में जोड़ा गया। यदि आप ngClass दस्तावेज़ों को देखते हैं तो आप देखेंगे कि आप एक वर्ग को वापस करने वाले कार्यों को भी संलग्न कर सकते हैं, या सीधे संलग्न शर्तों के साथ HTML में कक्षाएं लिख सकते हैं।

Answer 2

आप ng-class उपयोग कर सकते हैं गतिशील रूप से आपकी div या बटन या जो कुछ भी

यहाँ करने के लिए वर्ग जोड़ने के लिए अपने कोड के साथ एक काम plunker है

http://embed.plnkr.co/rzS8GV975BHRk83xhsPx/preview

आशा इस मदद करता है

Answer 3

यदि आप चाहते हैं कक्षा जोड़ने के लिए इसे आज़माएं:

var myEl = angular.element(document.querySelector('#twentyFour')); 
myEl.addClass('active'); 

आप अपनी आवश्यक आईडी के साथ क्वेरी चयनकर्ता में चीजों को प्रतिस्थापित कर सकते हैं।

Answer 4

आप 'ngClass' का उपयोग करके ऐसा कर सकते हैं। यह भी ध्यान रखें कि आप किसी भी HTML तत्व की कक्षा तय करने के लिए अभिव्यक्ति का उपयोग कर सकते हैं।

मान लीजिए कि $ _uttonActive = false नामक मॉडल तत्व है;

<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton" ng-click="clickTwentyFour($event)" 
data-ng-class="isButtonActive? 'Active': 'Passive' "/> 

नियंत्रक से 'isButtonActive' का मान बदलने से, ('सही' के लिए isButtonActive मूल्य, 'सक्रिय' वर्ग जोड़ा जाता है) आप सीएसएस वर्ग को नियंत्रित कर सकते हैं।