AngularJS رهنمود 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>
binding دو طرفه
اتصال به هر دو روش می رود. اگر کاربر تغییر مقدار در داخل فیلد ورودی، اموال AngularJS را نیز ارزش خود را تغییر خواهد کرد:
مثال
<div ng-app=”myApp” ng-controller=”myCtrl”>
Name: <input ng-model=”name”>
<h1>You entered: {{name}}</h1>
</div>
تایید اعتبار ورودی کاربر
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>
در مثال بالا، طول نمایش داده خواهد شد تنها در صورتی که بیان در ng-show ویژگی گرداند true .
در صورتی که ملک در ng-model ویژگی وجود ندارد، از AngularJS یک برای شما ایجاد.
وضعیت برنامه
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>
کلاس های 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>
ng-model بخشنامه می افزاید: / حذف کلاس های زیر، با توجه به وضعیت این زمینه به شکل:
- نانوگرم خالی
- NG-نمی-خالی
- NG-لمس
- NG-دست نخورده
- نانوگرم معتبر
- NG-نامعتبر
- NG-کثیف
- نانوگرم در حال بررسی
- NG-بکر
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.