Jassif Team Institution

AngularJS HTML DOM

AngularJS க்கு HTML DOM உறுப்புகளின் பண்புகளுடன் பயன்பாட்டுத் தரவைப் பைண்ட் செய்வதற்கான டைரக்டிவ்கள் உள்ளன.

ng-disabled டைரக்டிவ்

ng-disabled டைரக்டிவ் AngularJS பயன்பாட்டுத் தரவை HTML உறுப்புகளின் disabled பண்புக்குப் பைண்ட் செய்கிறது.

AngularJS Example

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

<p>
{{ mySwitch }}
</p>

</div>

பயன்பாடு விளக்கம்:

ng-disabled டைரக்டிவ் பயன்பாட்டுத் தரவு mySwitch ஐ HTML பட்டனின் disabled பண்புக்குப் பைண்ட் செய்கிறது.

ng-model டைரக்டிவ் HTML செக்பாக்ஸ் உறுப்பின் மதிப்பை mySwitch இன் மதிப்புக்குப் பைண்ட் செய்கிறது.

mySwitch இன் மதிப்பு true ஆக மதிப்பீடு செய்யப்பட்டால், பட்டன் முடக்கப்படும்:

<p>
<button disabled>Click Me!</button>
</p>

mySwitch இன் மதிப்பு false ஆக மதிப்பீடு செய்யப்பட்டால், பட்டன் முடக்கப்படாது:

<p>
<button>Click Me!</button>
</p>

ng-show டைரக்டிவ்

ng-show டைரக்டிவ் ஒரு HTML உறுப்பைக் காட்டுகிறது அல்லது மறைக்கிறது.

AngularJS Example

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

ng-show டைரக்டிவ் ng-show இன் மதிப்பின் அடிப்படையில் ஒரு HTML உறுப்பைக் காட்டுகிறது (அல்லது மறைக்கிறது).

true அல்லது false ஆக மதிப்பீடு செய்யும் எந்த வெளிப்பாட்டையும் நீங்கள் பயன்படுத்தலாம்:

AngularJS Example

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>

ng-hide டைரக்டிவ்

ng-hide டைரக்டிவ் ஒரு HTML உறுப்பை மறைக்கிறது அல்லது காட்டுகிறது.

AngularJS Example

<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>

நடைமுறை எடுத்துக்காட்டுகள்

பயிற்சிகள் மூலம் கற்றல்

விரைவு குறிப்பு