آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک

4 سال پیش

امتیاز دهید post

آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک خواهیم پرداخت.

در این درس، ما خواهیم فهمید که فرم های جاوا اسکریپت چیست و خواهیم آموخت که جعبه انتخاب جاوا اسکریپت ، دکمه های رادیویی و ضامن چیست.

استفاده از ion-checkbox

بگذارید نحوه استفاده از کادر تأیید جاوا اسکریپت را ببینیم. در مرحله اول، ما باید یک عنصر ion-checkbox در پرونده HTML ایجاد کنیم. در داخل این ، ما یک ویژگی ng-model اختصاص می دهیم که به scope$ زاویه دار متصل شود. مشاهده خواهید کرد که ما هنگام تعیین مقدار مدل از نقطه استفاده می کنیم حتی اگر مدل بدون آن کار کند. این به ما امکان می دهد که ارتباط بین کودک و حوزه والدین را همیشه حفظ کنیم.

این بسیار مهم است زیرا به شما کمک می کند تا از برخی موارد که ممکن است در آینده اتفاق بیفتد جلوگیری کنید. پس از ایجاد عنصر، مقدار آن را با استفاده از عبارات زاویه ای پیوند می دهیم.

&lt;ion-checkbox ng-model = "checkboxModel.value1"&gt;Checkbox 1&lt;/ion-checkbox&gt;
&lt;ion-checkbox ng-model = "checkboxModel.value2"&gt;Checkbox 2&lt;/ion-checkbox&gt;

&lt;p&gt;Checkbox 1 value is: &lt;b&gt;{{checkboxModel.value1}}&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;Checkbox 2 value is: &lt;b&gt;{{checkboxModel.value2}}&lt;/b&gt;&lt;/p&gt;

<ion-checkbox ng-model = "checkboxModel.value1">Checkbox 1</ion-checkbox>

<ion-checkbox ng-model = "checkboxModel.value2">Checkbox 2</ion-checkbox>

Checkbox 1 value is: {{checkboxModel.value1}}

Checkbox 2 value is: {{checkboxModel.value2}}

سپس ما باید مقادیر را به مدل خود در داخل کنترل کننده اختصاص دهیم. مقادیری که استفاده خواهیم کرد نادرست است =، زیرا می خواهیم با کادرهای تأیید نشده شروع کنیم.

$scope.checkboxModel = {
   value1 : false,
   value2 : false
};

$scope.checkboxModel = {

value1 : false,

value2 : false

};

کد فوق صفحه زیر را تولید می کند –

Ionic Checkbox Unchecked
اکنون، وقتی روی عناصر کادر تأیید ضربه بزنیم ، همانطور که در تصویر زیر نشان داده شده است ، به طور خودکار مقدار مدل آنها را به “true” تغییر می دهد.

با استفاده از ion-radio

برای شروع، ما باید سه عنصر ion-radio در HTML خود ایجاد کنیم و ng-model و مقدار ng را به آن اختصاص دهیم. پس از آن، ما مقدار انتخاب شده را با بیان زاویه ای نمایش می دهیم. ما با برداشتن علامت هر سه عنصر رادیویی شروع خواهیم کرد ، بنابراین مقدار به صفحه نمایش ما اختصاص نخواهد یافت.

&lt;ion-radio ng-model = "radioModel.value" ng-value = "1"&gt;Radio 1&lt;/ion-radio&gt;
&lt;ion-radio ng-model = "radioModel.value" ng-value = "2"&gt;Radio 2&lt;/ion-radio&gt;
&lt;ion-radio ng-model = "radioModel.value" ng-value = "3"&gt;Radio 3&lt;/ion-radio&gt;

&lt;p&gt;Radio value is: &lt;b&gt;{{radioModel.value}}&lt;/b&gt;&lt;/p&gt;

<ion-radio ng-model = "radioModel.value" ng-value = "1">Radio 1</ion-radio>

<ion-radio ng-model = "radioModel.value" ng-value = "2">Radio 2</ion-radio>

<ion-radio ng-model = "radioModel.value" ng-value = "3">Radio 3</ion-radio>

Radio value is: {{radioModel.value}}

کد فوق صفحه زیر را تولید می کند –

Ionic Radio unchecked
وقتی روی عنصر کادر دوم ضربه بزنیم ، مقدار به ترتیب تغییر خواهد کرد.

استفاده از ion-toggle

متوجه خواهید شد که toggle مانند کادر تأیید است. ما همان مراحل را که با کادر انتخاب خود انجام دادیم دنبال خواهیم کرد. در فایل HTML ، ابتدا عناصر ion-toggle ایجاد می کنیم ، سپس مقدار ng-model را اختصاص می دهیم و سپس مقادیر بیان را به نمای خود پیوند می دهیم.

&lt;ion-toggle ng-model = "toggleModel.value1"&gt;Toggle 1&lt;/ion-toggle&gt;
&lt;ion-toggle ng-model = "toggleModel.value2"&gt;Toggle 2&lt;/ion-toggle&gt;
&lt;ion-toggle ng-model = "toggleModel.value3"&gt;Toggle 3&lt;/ion-toggle&gt;

&lt;p&gt;Toggle value 1 is: &lt;b&gt;{{toggleModel.value1}}&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;Toggle value 2 is: &lt;b&gt;{{toggleModel.value2}}&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;Toggle value 3 is: &lt;b&gt;{{toggleModel.value3}}&lt;/b&gt;&lt;/p&gt;

<ion-toggle ng-model = "toggleModel.value1">Toggle 1</ion-toggle>

<ion-toggle ng-model = "toggleModel.value2">Toggle 2</ion-toggle>

<ion-toggle ng-model = "toggleModel.value3">Toggle 3</ion-toggle>

Toggle value 1 is: {{toggleModel.value1}}

Toggle value 2 is: {{toggleModel.value2}}

Toggle value 3 is: {{toggleModel.value3}}

در مرحله بعدی ، ما مقادیر را به range.toggleModel$ در کنترل کننده خود اختصاص می دهیم. از آنجا که ، ضامن از مقادیر Boolean استفاده می کند ، ما به عنصر اول درست و برای دو مورد دیگر false می دهیم.

$scope.toggleModel = {
   value1 : true,
   value2 : false,
   value3 : false
};

$scope.toggleModel = {

value1 : true,

value2 : false,

value3 : false

};

کد فوق صفحه زیر را تولید می کند –

Ionic Toggle Mixed
اکنون ما روی ضامن دوم و سوم ضربه خواهیم زد تا نحوه تغییر مقادیر از false به true به شما نشان داده شود.

Ionic Toggle Checked

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

امتیاز دهید post

نویسنده مطلب saber

آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک

آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک

استفاده از ion-checkbox

با استفاده از ion-radio

استفاده از ion-toggle

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

بدون دیدگاه

آموزش فرم های جاوا اسکریپت در برنامه نویسی آیونیک

استفاده از ion-checkbox

با استفاده از ion-radio

استفاده از ion-toggle

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه