AngularJS நிகழ்வுகள்: ng-click, ng-show, ng-hide Directive [எடுத்துக்காட்டு]



கோண var app = angular.module ('DemoApp', []); app.controller ('DemoController', function ($ scope) {$ scope.IsVisible = false; $ scope.ShowHide = function () {$ scope.IsVisible = $ scope.IsVisible = true;}});

குறியீடு விளக்கம்:

  1. பொத்தான் உறுப்புடன் ng-click நிகழ்வு உத்தரவை இணைக்கிறோம். இங்கே எங்கள் கட்டுப்பாட்டாளர் - DemoController இல் வரையறுக்கப்பட்ட ஷோஹைட் என்ற செயல்பாட்டை நாங்கள் குறிப்பிடுகிறோம்.
  2. கோணல் உரையைக் கொண்ட ஒரு டிவி டேக்கில் ng-hide பண்புக்கூறை இணைக்கிறோம். இது குறிச்சொல், நாம் ng-show பண்பின் அடிப்படையில் காட்ட/மறைக்கப் போகிறோம்.
  3. கட்டுப்படுத்தியில், நாம் isVisible உறுப்பினர் மாறியை நோக்கம் பொருளுடன் இணைக்கிறோம். டிவி கண்ட்ரோலின் தெரிவுநிலையைக் கட்டுப்படுத்த இந்த பண்பு ng-show கோண பண்புக்கு அனுப்பப்படும். நாங்கள் முதலில் இதை பொய்யாக அமைக்கிறோம், அதனால் பக்கம் முதலில் காட்டப்படும் போது டிவி டேக் மறைக்கப்படும்.
  4. நாங்கள் ஷோஹைட் செயல்பாட்டில் குறியீட்டைச் சேர்க்கிறோம், இது IsVisible உறுப்பினர் மாறியை உண்மை என அமைக்கும், இதனால் பயனருக்கு டேவ் டேக் காட்டப்படும்.

குறியீடு வெற்றிகரமாக செயல்படுத்தப்பட்டால், உலாவியில் உங்கள் குறியீட்டை இயக்கும்போது பின்வரும் வெளியீடு காட்டப்படும்.

வெளியீடு:

வெளியீட்டில் இருந்து,

  • ஆரம்பத்தில் 'AngularJs' என்ற உரை உள்ள டிவி டேக் ஆரம்பத்தில் காண்பிக்கப்படுவதைக் காணலாம், ஏனெனில் பொய்யின் சொத்து மதிப்பு ng- மறை உத்தரவுக்கு அனுப்பப்படுகிறது.
  • நாம் 'கோணத்தை மறை' பொத்தானைக் கிளிக் செய்யும்போது, ​​உண்மையான சொத்து மதிப்பு ng- மறை உத்தரவுக்கு அனுப்பப்படும். எனவே கீழே உள்ள வெளியீடு காட்டப்படும், அதில் 'கோணல்' என்ற வார்த்தை மறைக்கப்படும்.

AngularJS நிகழ்வு கேட்போர் உத்தரவுகள்

இந்த ஒன்று அல்லது அதற்கு மேற்பட்ட வழிமுறைகளைப் பயன்படுத்தி உங்கள் HTML கூறுகளுக்கு AngularJS நிகழ்வு கேட்பவர்களை நீங்கள் சேர்க்கலாம்:

  • of-blur
  • மாற்றத்தின்
  • கிளிக்
  • நகல்
  • வெட்டு
  • ng-dblclick
  • கவனம்
  • ஆஃப்-கீடவுன்
  • of-keypress
  • இன்-கீயப்
  • மவுஸ் டவுன்
  • சுட்டிதாரரின்
  • ng-mouseleave
  • ng-mousemove
  • மவுஸ்ஓவரின்
  • of-mouseup
  • ஒட்டு-ஒட்டு

சுருக்கம்

  • பொத்தான் கிளிக்குகள், விசைப்பலகை மற்றும் மவுஸ் கிளிக்குகள் போன்ற பயனர் தலையீட்டால் உருவாக்கப்பட்ட நிகழ்வுகளுக்கு பதிலளிக்க தனிப்பயன் குறியீட்டைச் சேர்க்க நிகழ்வுகளின் உத்தரவுகள் கோணத்தில் பயன்படுத்தப்படுகின்றன.
  • மிகவும் பொதுவான நிகழ்வு உத்தரவு AngularJS ng- கிளிக் உத்தரவு ஆகும், இது கிளிக் நிகழ்வுகளை கையாள பயன்படுகிறது. இதன் மிகவும் பொதுவான பயன்பாடு ஆங்கிலுவார்ஜெஎஸ் பொத்தான்கள் கிளிக் ஆகும், அதில் ஒரு பொத்தானை கிளிக் செய்வதற்கு குறியீடு சேர்க்கலாம்.
  • AngularJS ng-show Directive, Angular ng-hide Directive மற்றும் ng- தெரியும் பண்புகளைப் பயன்படுத்தி HTML உறுப்புகளையும் மறைக்கலாம் அல்லது அதன்படி பயனருக்குக் காட்டலாம்.