دستور ng-model در آنگولار جی اس

دستورالعمل ng-model مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.

مقالات

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

با دستورالعمل ng-model شما می توانید مقدار یک فیلد ورودی را به یک متغیر ایجاد شده در 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>

Name: <input ng-model="name">

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.name = "John Doe";

});

</script>

اتصال دوطرفه

اتصال هر دو راه را می گیرد. اگر کاربر مقدار درون فیلد ورودی را تغییر دهد، ویژگی AngularJS نیز مقدار آن را تغییر می دهد:

مثال:

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
    <h1>You entered: {{name}}</h1>
</div>

Name: <input ng-model="name">

<h1>You entered: {{name}}</h1>

</div>

ورودی کاربر را تأیید کنید Validate User Input

دستورالعمل ng-model می تواند اعتبار نوع داده های برنامه (شماره، ایمیل، مورد نیاز) را فراهم کند:

مثال:

<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>

Email:

<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>

</form>

در مثال بالا، فاصله تنها زمانی نمایش داده می شود که بیان در ویژگی ng-show درست باشد.

اگر اموال در ویژگی ng-model وجود نداشته باشد، AngularJS یکی را برای شما ایجاد می کند.

وضعیت برنامه – Application Status

دستورالعمل ng-model می تواند وضعیت داده های برنامه (نادرست، کثیف، لمس، خطا) را فراهم کند:

<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>

Email:

<h1>Status</h1>

</form>

کلاس های CSS

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

مثال:

<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>

<style>

input.ng-invalid {

background-color: lightblue;

}

</style>

<body>

Enter your name:

</form>

دستورالعملng-model با توجه به وضعیت فیلد فرم، کلاسهای زیر را اضافه می کند:

5/5 - (1 امتیاز)

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

مطالب زیر را حتما مطالعه کنید

Stevbope گفت:

جولای 24, 2019 در 3:14 ب.ظ

Viagra 30 Anni generic cialis overnight delivery Flagyl 400 Er

پاسخ
Stevbope گفت:

جولای 24, 2019 در 4:37 ب.ظ

Cialis 5mg Preise Apotheke Fda Approved Canadian Online Pharmacies online pharmacy Zithromax Vs Penicillin Cephalexin Image

پاسخ

دستور ng-model در آنگولار جی اس – AngularJS

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

اتصال دوطرفه

ورودی کاربر را تأیید کنید Validate User Input

وضعیت برنامه – Application Status

کلاس های CSS

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

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

اتصال دوطرفه

ورودی کاربر را تأیید کنید Validate User Input

وضعیت برنامه – Application Status

کلاس های CSS

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ