ionic-framework
Ionic AngularJS एक्सटेंशन

टिप्पणियों

प्रपत्र इनपुट

आयोनिक इनपुट सामान्य एचटीएमएल इनपुट से अलग नहीं होते हैं लेकिन उन्हें अलग तरह से स्टाइल किया जाता है और निर्देश के रूप में उपयोग किया जाता है। आप सामान्य HTML इनपुट का उपयोग Ionic ऐप में भी कर सकते हैं। यहाँ कुछ बुनियादी उदाहरण दिए गए हैं जो इओनिक रेडी-टू-गो प्रदान करता है।

चेकबॉक्स:

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

रेडियो बटन:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

टॉगल:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

मोडल खिड़कियां

आयोनिक में मोडल विंडो प्रदर्शित करने के लिए इसका स्वयं का विस्तार है। किसी <script> टैग के साथ टेम्पलेट को सीधे दृश्य में सम्मिलित करके या एक अलग टेम्पलेट फ़ाइल का उपयोग करके मॉडल बनाए जा सकते हैं। इस उदाहरण में हम आपको एक एचटीएमएल फ़ाइल का नाम है मानते हैं modal-template.html नामक फ़ोल्डर में templates । आप मोडल इनिशियलाइज़ेशन फ़ंक्शन से टेम्पलेट पथ को fromTemplateUrl साथ fromTemplateUrl ।

कार्यक्षेत्र में मोडल ऑब्जेक्ट बनाना

एचटीएमएल

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

नियंत्रक

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

मोडल को नियंत्रित करें

फिर आप निम्न आदेशों के साथ मोडल को नियंत्रित कर सकते हैं।

ओपन मोडल

$scope.modal.show();

बंद मोडल

$scope.modal.hide();

मोडल निकालें

$scope.modal.remove();

मोडल इवेंट

आप निम्न कार्यों के साथ मोडल इवेंट सुन सकते हैं।

मोडल छिपा है

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

मोडल निकाला जाता है

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});