نماذج AngularJS

تقدم AngularJS نماذج الدخول البياناتية والتحقق من صحتها.

سيطرة الدخول

سيطرة الدخول هي عناصر HTML المدخلة:

• عنصر input
• عنصر select
• عنصر button
• عنصر textarea

الزام بياناتي

سيطرة الدخول من خلال ng-model تعليمات تقدم التزامًا بياناتيًا.

<input type="text" ng-model="firstname">

الآن، التطبيق يحتوي على الاسم .

ng-model تعليمات ترتبط بسيطرة الدخول في باقي التطبيق.

صفة الاسم، يمكن استدعاؤه في السيطرة:

مثال

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
});
</script>

تجربة شخصية

يمكن أيضًا استدعاؤه في مواقع أخرى من التطبيق:

مثال

<form>
  الاسم: <input type="text" ng-model="firstname">
</form>
<h1>أنت قد أدخلت: {{firstname}}</h1>

تجربة شخصية

المربع المربع

قيمة المربع المربع هي صحيح أو غير صحيح، سيتم ng-model تعليمات تطبق على المربع المربع، وتستخدم قيمته في تطبيقك.

مثال

إذا تم اختيار المربع المربع، سيتم عرض العنوان:

<form>
  اخترها لإظهار العنوان:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">عنواني</h1>

تجربة شخصية

الزر المختار

استخدام ng-model تعليمات تربط الزر المختار بتطبيقك.

مثل ng-model يمكن أن يكون لديها قيم مختلفة، ولكن سيتم استخدام القيمة المختارة فقط.

مثال

سيظهر نص اعتمادًا على قيمة الزر المختار:

<form>
  اختر موضوعًا:
  <input type="radio" ng-model="myVar" value="dogs">الكلاب
  <input type="radio" ng-model="myVar" value="tuts">دروس
  <input type="radio" ng-model="myVar" value="cars">السيارات
</form>

تجربة شخصية

سيكون قيمة myVar كلاب،دروس أو سيارات。

مربعات الاختيار

استخدام ng-model سيقوم التعليمات البرمجية بربط مربع الاختيار الخاص بك بنموذج التطبيق الخاص بك.

ng-model الصفات المحددة في السمة سيكون لها نفس القيمة التي يتم اختيارها في مربع الاختيار.

مثال

سيتم عرض بعض النصوص بناءً على القيمة المحددة للخيار المختار:

<form>
  اختر موضوعًا:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">كلاب
    <option value="tuts">دروس
    <option value="cars">سيارات
  </select>
</form>

تجربة شخصية

قيمة myVar سيكون كلاب،دروس أو سيارات。

مثال على نموذج AngularJS

كود التطبيق

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    الاسم:<br>
    <input type="text" ng-model="user.firstName"><br>
    الاسم العائلي:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">الإعادة إلى الوضع الأصلي</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
});
</script>

تجربة شخصية

novalidate الخصائص هي خصائص جديدة في HTML5. إنها تمنع أي تأكيد افتراضي للبrowser.

مفهوم المثال

ng-app تعليمات تعريف تطبيق AngularJS.

ng-controller تعليمات تعريف مستشاري التطبيق.

ng-model تعليمات تجمع بين عناصر الدخول إلى المعادلة user في النموذج.

formCtrl مستشاري master المعادلة ويتم تعريف reset() الأساليب.

reset() سيتم ضبط المعادلة على user يتم ضبط المعادلة على master المعادلة.

ng-click التعليمات فقط عند النقر على الزر reset() الأساليب.

لا تحتاج هذا التطبيق إلى خاصية novalidate، ولكن عادةً ما تستخدمها في نماذج AngularJS لاستبدال التحقق الافتراضي HTML5.