logo-mini

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-بکر

نظر بدهید