مدل در AngularJS

دستورالعمل ng-model در AngularJS

دستورالعمل ng-app کنترل های برنامه AngularJS  را از جمله (input , select , textarea) را مقدار دهی اولیه میکند.

دستورالعمل ng-model

با دستور ng-model شما میتوانید مقادیر اولیه کنترل ها را از طریق AngularJS ایجاد کنید .

مثال مدل در AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script> 
مشاهده مثال

دو راهی  مقدار دهی اولیه

اگر کاربرمقایر درون ورودی input را تغییر دهد ، AnguarJS نیز پس از آنم مقدار را تغییر خواهد داد.

مثال مدل در AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
    <h1>You entered: {{name}}</h1>
</div>
مشاهده مثال

اعتبار سنجی مقادیر ورودی

دستور ng-model میتواند مدل های اعتبار سنجی مختلفی را برای فیلد های مختلف ورودی ایجاد کند که از جمله آن ها ( شماره تلفن ها ، ایمیل ها ، مقادیر ستاره دار که نباید خالی بمانند و ... )

مثال مدل در AngularJS
<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
مشاهده مثال

مثال بالا تگ <span> زمانی نمایش داده می شود که متغیر ng-show مقدار true برگرداند.

اگر ویژگی ng-model وجود نداشته باشد ، AngularJS بصورت پیش فرص برای شما آن را ایجاد خواهد کرد.

وضعیت ها در برنامه AngularJS

دستور ng-model میتواند وضعیت هایی را برای داده های برنامه فراهم آورد.( invalid , dirty , touched , error ) .

مثال مدل در AngularJS
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required>
    <h1>Status</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>
مشاهده مثال

کلاس های CSS

دستور ng-model میتواند کلاس های CSS را برای عناصر HTML  فراهم آورد که ارتباط مستقیمی با وضعیت آن ها داشته باشد.

مثال مدل در AngularJS
 <style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    Enter your name:
    <input name="myName" ng-model="myText" required>
</form>
مشاهده مثال

وضعیت های که میتواند برای یک فیلد در فرم HTML به وجود بیاید :

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

محمد رضا معینی لطفا درس ها رو تکمیل کنید.تکمیل نیستن هیچ کدوم
علیرضا احمدی محمدرضا جان این اتفاق به مرور داره میفته ، ممنون که شکیبا هستید .

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط