التوجيه نانوغرام نموذج يربط قيمة عناصر HTML (المدخلات، حدد، جزء النص) لبيانات التطبيق.
التوجيه نانوغرام نموذج
مع 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> انها محاولة لنفسك » اتجاهين التجليد
الربط يذهب في كلا الاتجاهين. إذا قام المستخدم بتغيير قيمة داخل حقل الإدخال، فإن الملكية 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 = '[email protected]'">
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 يوفر التوجيه الطبقات المغلق لعناصر HTML، اعتمادا على وضعهم:
مثال
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myAddress" ng-model="text" required>
</form>
انها محاولة لنفسك » و ng-model يضيف التوجيه / يزيل الطبقات التالية، وفقا لحالة من حقل النموذج:
- نانوغرام فارغة
- نانوغرام، وليس فارغة
- نانوغرام تطرق
- نانوغرام واحد سليما
- نانوغرام صالحة
- نانوغرام غير صحيحة
- نانوغرام قذرة
- نانوغرام في انتظار
- نانوغرام البكر