ورود / ثبت نام
0
0

وارد کردن فقط عدد در Textbox توسط Directive در Angularjs

536 بازدید
Directive

Directive

دراین مقاله قصد داریم با Directive ها و کاربرد آن در اعمال محدودیت در ورودیText Box  آشنا بشویم پس با ما همراه باشید: Directive از قوی ترین مفاهیم در AngularJS  است. Directives  به توسعه دهندگان امکان طراحی هر نوع کنترل یا کامپوننتی را می دهد که به راحتی می توان از آن به عنوان attribute و element در HTML استفاده کرد.

Directive

می خواهیم نحوه ایجاد یکdirective  را توضیح دهیم که فقط اجازه ورود اعداد را در  text box می دهد پس تکس باکس، رشته یا حتی کاراکترهای خاص را تایید نمی کند.

در برنامه زیر یک directive تعریف شده است:


var app = angular.module("myModule");

app.directive("numbersOnly", function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/g, '');

if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
return undefined;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});

در قسمت بالا “require”   را از نوع “ngModel” تعریف کردیم همچنین عبارات منظم را به صورت “/[^۰-۹]/g” تعیین کرده تا فقط اعداد بتوانند در تکس باکس وارد شوند.

require:’ngModel’ به توسعه دهندگان اجازه می دهد تا از مدل متصل شده به عنصر یا والدین آن عنصر که در directive   محدود شده، استفاده کنند. اساسا راحت ترین راه برای ارسال ngModel به تابع link/compile به جای ارسال با استفاده از scope option است. دسترسی به ngModel یک بار فراهم است که می توانید مقدار آن را با استفاده از $setViewValue تغییر بدهید یا با استفاده از $formatters مقدار آن پاک کنید.

حالا directive  را در index.html بارگذاری کنید و سپس مثل دستورات زیر در تکس باکس خودتان استفاده کنید:


<input type="text"

class="textFields" placeholder="Amount" ng-model="contactUsController.amount"

numbers-only />

AngularJS directive ویژگی بسیار قدرتمندی است که طراحی هر کنترل یا کامپوننت ها را انعطاف پذیر تر کرده وبدین وسیله قابلیت استفاده مجدد را افزایش می دهد.

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=21571
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
مسعود شریفی پور
از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد وارد کردن فقط عدد در Textbox توسط Directive در Angularjs

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

هیچ دیدگاهی نوشته نشده است.