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

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

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 ویژگی بسیار قدرتمندی است که طراحی هر کنترل یا کامپوننت ها را انعطاف پذیر تر کرده وبدین وسیله قابلیت استفاده مجدد را افزایش می دهد.

  • پسورد: www.mspsoft.com
مسعود شریفی پور

از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم