مدل در AngularJS

یادگیری AngularJS

تعداد بازدید : 2053

تاریخ و ساعت انتشار : شنبه 26 اسفند 1396 01:06

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

دستورالعمل ng-app کنترل های برنامه AngularJS را از جمله (input , select , textarea) را مقدار دهی اولیه میکند.

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

با دستور ng-model شما میتوانید مقادیر اولیه کنترل ها را از طریق AngularJS ایجاد کنید .

مثال مدل در 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>

مشاهده مثال

دو راهی مقدار دهی اولیه

اگر کاربرمقایر درون ورودی input را تغییر دهد ، AnguarJS نیز پس از آنم مقدار را تغییر خواهد داد.

مثال مدل در AngularJS

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

مشاهده مثال

اعتبار سنجی مقادیر ورودی

دستور ng-model میتواند مدل های اعتبار سنجی مختلفی را برای فیلد های مختلف ورودی ایجاد کند که از جمله آن ها ( شماره تلفن ها ، ایمیل ها ، مقادیر ستاره دار که نباید خالی بمانند و ... )

مثال مدل در AngularJS

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

مشاهده مثال

مثال بالا تگ <span> زمانی نمایش داده می شود که متغیر ng-show مقدار true برگرداند.

اگر ویژگی ng-model وجود نداشته باشد ، AngularJS بصورت پیش فرص برای شما آن را ایجاد خواهد کرد.

وضعیت ها در برنامه AngularJS

دستور ng-model میتواند وضعیت هایی را برای داده های برنامه فراهم آورد.( invalid , dirty , touched , error ) .

مثال مدل در AngularJS

<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 فراهم آورد که ارتباط مستقیمی با وضعیت آن ها داشته باشد.

مثال مدل در AngularJS

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

مشاهده مثال

وضعیت های که میتواند برای یک فیلد در فرم HTML به وجود بیاید :