0

بلاگ

آکادمی راهکارینو بلاگ برنامه‌نویسی فرانت اند انگولار آموزش دایرکتیوهای انگولار جی‌اس – صد در صد تضمینی!

آموزش دایرکتیوهای انگولار جی‌اس – صد در صد تضمینی!

۱۳۹۹/۰۱/۲۱
ارسال شده توسط
انگولار
1.11k بازدید
آموزش دایرکتیوهای انگولار جی‌اس - صد در صد تضمینی!

دایرکتیوهای انگولار به چند صورت می توانند تعریف شوند: المنت، اتریبیوت، کامنت و کلاس CSS

فریم ورک انگولار جی اس دایرکتیوهای پیش فرض خود را دارد مانند ngModel و ngForm و ngClass ما در این مقاله قصد داریم اغلب دایرکتیوهای کاربردی و رایج در AngularJS را آموزش دهیم. هرچند خودتان می توانید Directive های دلخواه خود را نیز تعریف کنید.

دایرکتیوها به کامپایلر HTML یعنی compile$  دستور می دهد که یک رفتار خاصی را به یک المان نسبت داده شود یا یک المان جدید تعریف شود.

 

دایرکتیو ngForm:

 

سناریوهای مختلف ثبت فرم در انگولار:

اگر فرمی فقط شامل یک فیلد input باشد و کاربر روی کلید enter بزند، فرم ثبت می شود. Submit
اگر فرمی چند input داشته باشد و و هیچ دکمه submit یا button نداشته باشد و کاربر روی enter بزند فرم ثبت نخواهد شد.
اگر فرمی شامل چندین فیلد input و چندین دکمه submit باشد، با کلیک کاربر روی enter اولین دکمه ثبت اجرا خواهد شد.

به دو روش می توان فرم های انگولار را submit کرد:

  1. تعریف اتریبیوت دایرکتیو ngSubmit در المنت فرم
  2. تعریف اتریبیوت دایرکتیو ngClick در المنت دکمه (type=”submit” یا button)

نحوه استفاده:

<form
  [name="string"]>
...
</form>

کلاس های css در فرم های انگولار:

ng-valid وقتی فرم معتبر است
ng-invalid وقتی فرم نامعتبر است
ng-pending وقتی فرم در حالت انتظار است
ng-pristine وقتی فرم دست نخورده است
ng-dirty وقتی فرم دستکاری شده است
ng-submitted وقتی فرم ثبت شده است

با توجه به وضعیت فرم و input های داخل آن، می توان از کلاس های css فوق برای نمایش انیمیشن یا افکت مربوطه استفاده کرد. مثلا در استایل زیر از حالت ng-invalid برای استایل دهی استفاده کردیم:

.my-form {
  transition:0.5s linear all;
  background: white;
}
.my-form.ng-invalid {
  background: red;
  color: white;
}

مثال:

در مثال زیر می خواهیم وقتی فرم خالی ثبت می شود بک گراند فرم با یک افکت fade قرمز رنگ شود:

index.html

<script>
  angular.module('formExample', [])
    .controller('FormController', ['$scope', function($scope) {
      $scope.userType = 'guest';
    }]);
</script>
<style>
 .my-form {
   transition:all linear 0.5s;
   background: transparent;
 }
 .my-form.ng-invalid {
   background: red;
 }
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <code>userType = {{userType}}</code><br>
  <code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
  <code>myForm.input.$error = {{myForm.input.$error}}</code><br>
  <code>myForm.$valid = {{myForm.$valid}}</code><br>
  <code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
 </form>

 

دایرکتیو a

تگ a در انگولار کاربر را به صفحه دیگری هدایت نمی کند و صفحه را رفرش نمی کند. و می توان اتریبیوت href را خالی گذاشت:

<a href="" ng-click="list.addItem()">Add Item</a>

 

دایرکتیو input

تگ input در html وقتی با اتریبیوت ngModel بکار برود، قابلیت های اتصال داده یا data-binding، اعتبارسنجی یا validation و کنترل وضعیت input یا state control فراهم خواهد شد.

نحوه استفاده:

<input
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="boolean"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [ng-pattern="string"]
  [ng-change="string"]
  [ng-trim="boolean"]>
...
</input>

مثال:
در کد زیر دو فیلد ورودی first name و last name داریم که می خواهیم فیلد first name اجباری باشد و فیلد last name را از لحاظ min و max تعداد کاراکترها اعتبارسنجی کنیم.
با تعریف اتریبیوت required برای فیلد first name و تعریف دایرکتیوهای ng-minlength=”3″ ng-maxlength=”10″ برای فیلد last name این اعتبارسنجی را انجام می دهیم.

برای نمایش پیغام اعتبارسنجی هم داریم:

  • استفاده از اتریبیوت ng-show=”myForm.userName.$error.required” برای نمایش پیغام خطای اجباری بودن فیلد firstname
  • استفاده از اتریبیوت ng-show=”myForm.lastName.$error.minlength” برای نمایش پیغام خطای طولانی بودن یا کوتاه بودن فیلد lastname

index.html

<script>
   angular.module('inputExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.user = {name: 'guest', last: 'visitor'};
     }]);
</script>
<div ng-controller="ExampleController">
  <form name="myForm">
    <label>
       User name:
       <input type="text" name="userName" ng-model="user.name" required>
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.userName.$error.required">
       Required!</span>
    </div>
    <label>
       Last name:
       <input type="text" name="lastName" ng-model="user.last"
       ng-minlength="3" ng-maxlength="10">
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.lastName.$error.minlength">
        Too short!</span>
      <span class="error" ng-show="myForm.lastName.$error.maxlength">
        Too long!</span>
    </div>
  </form>
  <hr>
  <tt>user = {{user}}</tt><br/>
  <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br/>
  <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br/>
  <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br/>
  <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br/>
  <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br/>
</div>

 

دایرکتیو input[checkbox]

مانند چک باکس html

نحوه استفاده:

<input type="checkbox"
       ng-model="string"
       [name="string"]
       [ng-true-value="expression"]
       [ng-false-value="expression"]
       [ng-change="string"]>

مثال:

index.html

<script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Value1:
    <input type="checkbox" ng-model="checkboxModel.value1">
  </label><br/>
  <label>Value2:
    <input type="checkbox" ng-model="checkboxModel.value2"
           ng-true-value="'YES'" ng-false-value="'NO'">
   </label><br/>
  <tt>value1 = {{checkboxModel.value1}}</tt><br/>
  <tt>value2 = {{checkboxModel.value2}}</tt><br/>
 </form>

 

دایرکتیو input[date]

برای ورود تاریخ با استاندارد ISO-8601 یعنی با فرمت yyyy-MM-dd (مانند: 23-05-2019) از این دایرکتیو استفاده می گردد. به دلیل اینکه بسیاری از مرورگرهای مدرن و جدید هم ممکن است از این نوع input پشتیبانی نکنند پیشنهاد می شود حتما فرمت ورودی تاریخ را در placeholder به کاربر اعلام کنید.

نحوه استفاده:

<input type="date"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

مثال:

index.html

<script>
   angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.example = {
         value: new Date(2013, 9, 22)
       };
     }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
   <label for="exampleInput">Pick a date in 2013:</label>
   <input type="date" id="exampleInput" name="input" ng-model="example.value"
       placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
   <div role="alert">
     <span class="error" ng-show="myForm.input.$error.required">
         Required!</span>
     <span class="error" ng-show="myForm.input.$error.date">
         Not a valid date!</span>
    </div>
    <tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>

 

دایرکتیو input[datetime-local]

برای ورود تاریخ و زمان با استاندارد ISO-8601 یعنی با فرمت yyyy-MM-ddTHH:mm:ss (مانند: 2010-12-28T14:57:00) از این دایرکتیو استفاده می گردد. به دلیل اینکه بسیاری از مرورگرهای مدرن و جدید هم ممکن است از input با نوع datetime-local پشتیبانی نکنند پیشنهاد می شود حتما فرمت تاریخ و ساعت ورودی را در placeholder به کاربر اعلام کنید.

نحوه استفاده:

<input type="datetime-local"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

مثال:

index.html

<script>
  angular.module('dateExample', [])
    .controller('DateController', ['$scope', function($scope) {
      $scope.example = {
        value: new Date(2010, 11, 28, 14, 57)
      };
    }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
  <label for="exampleInput">Pick a date between in 2013:</label>
  <input type="datetime-local" id="exampleInput" name="input" ng-model="example.value"
      placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
    <span class="error" ng-show="myForm.input.$error.datetimelocal">
        Not a valid date!</span>
  </div>
  <tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>

 

دایرکتیو input[email]

برای نمایش یک input در فرم با قابلیت اعتبارسنجی آدرس ایمیل بکارمی رود.

نحوه استفاده:

<input type="email"
       ng-model="string"
       [name="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

مثال:

index.html

<script>
  angular.module('emailExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.email = {
        text: 'me@example.com'
      };
    }]);
</script>
  <form name="myForm" ng-controller="ExampleController">
    <label>Email:
      <input type="email" name="input" ng-model="email.text" required>
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
    </div>
    <tt>text = {{email.text}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
  </form>

 

دایرکتیو input[month]

برای ورود سال و ماه جاری با استاندارد ISO-8601 یعنی با فرمت yyyy-MM (مانند: 2018-08) از این دایرکتیو استفاده می گردد. به دلیل اینکه برخی از مرورگرها ممکن است از input با نوع month پشتیبانی نکنند پیشنهاد می شود حتما فرمت ورودی ماه را در placeholder به کاربر اعلام کنید.

نحوه استفاده:

<input type="month"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

مثال:

<script>
 angular.module('monthExample', [])
   .controller('DateController', ['$scope', function($scope) {
     $scope.example = {
       value: new Date(2013, 9, 1)
     };
   }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
  <label for="exampleInput">Pick a month in 2013:</label>
  <input id="exampleInput" type="month" name="input" ng-model="example.value"
     placeholder="yyyy-MM" min="2013-01" max="2013-12" required />
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
       Required!</span>
    <span class="error" ng-show="myForm.input.$error.month">
       Not a valid month!</span>
  </div>
  <tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>

 

دایرکتیو input[number]

برای نمایش یک input در فرم با قابلیت اعتبارسنجی ورودی عددی بکارمی رود.

نحوه استفاده:

<input type="number"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

مثال:

index.html

<script>
  angular.module('numberExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        value: 12
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Number:
    <input type="number" name="input" ng-model="example.value"
           min="0" max="99" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>
  <tt>value = {{example.value}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>

 

دایرکتیو input[radio]

همانند input با نوع radio در html می باشد.

نحوه استفاده:

<input type="radio"
       ng-model="string"
       value="string"
       [name="string"]
       [ng-change="string"]
       ng-value="string">

مثال:

index.html

<script>
  angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.color = {
        name: 'blue'
      };
      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>
    <input type="radio" ng-model="color.name" value="red">
    Red
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" ng-value="specialValue">
    Green
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" value="blue">
    Blue
  </label><br/>
  <tt>color = {{color.name | json}}</tt><br/>
 </form>

 

دایرکتیو input[text]

Input استاندارد html که می تواند در انگولار قابلیت data-binding داشته باشد. اکثر input ها از این نوع input ارث بری می کنند.

نحوه استفاده:

<input type="text"
       ng-model="string"
       [name="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]
       [ng-trim="boolean"]>

مثال:

index.html

<script>
  angular.module('textInputExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        text: 'guest',
        word: /^\s*\w*\s*$/
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Single word:
    <input type="text" name="input" ng-model="example.text"
           ng-pattern="example.word" required ng-trim="false">
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.pattern">
      Single word only!</span>
  </div>
  <tt>text = {{example.text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>

 

دایرکتیو input[time]

برای ورود زمان جاری با استاندارد ISO-8601 یعنی با فرمت HH:mm:ss (مانند: 14:57:00) از این دایرکتیو استفاده می شود. به دلیل اینکه برخی از مرورگرها ممکن است از input با نوع time پشتیبانی نکنند پیشنهاد می شود حتما فرمت ورودی تایم را در placeholder به کاربر اعلام کنید.

نحوه استفاده:

<input type="time"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

مثال:

index.html

<script>
 angular.module('timeExample', [])
   .controller('DateController', ['$scope', function($scope) {
     $scope.example = {
       value: new Date(1970, 0, 1, 14, 57, 0)
     };
   }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
   <label for="exampleInput">Pick a time between 8am and 5pm:</label>
   <input type="time" id="exampleInput" name="input" ng-model="example.value"
       placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
   <div role="alert">
     <span class="error" ng-show="myForm.input.$error.required">
         Required!</span>
     <span class="error" ng-show="myForm.input.$error.time">
         Not a valid date!</span>
   </div>
   <tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/>
   <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
   <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
   <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
   <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>

 

دایرکتیو input[url]

برای داشتن یک فیلد input که قابلیت اعتبارسنجی آدرس سایت یا URL را داشته باشد از input با نوع url استفاده کنید.

نحوه استفاده:

<input type="url"
       ng-model="string"
       [name="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

مثال:

index.html

<script>
  angular.module('urlExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.url = {
        text: 'http://google.com'
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>URL:
    <input type="url" name="input" ng-model="url.text" required>
  <label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.url">
      Not valid url!</span>
  </div>
  <tt>text = {{url.text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
 </form>

 

دایرکتیو input[week]

برای ورود هفته و سال با استاندارد ISO-8601 یعنی با فرمت yyyy-W## (مانند: 2013-W02 به معنی هفته دوم سال 2013 میلادی) از این دایرکتیو استفاده می شود. به دلیل اینکه برخی از مرورگرها ممکن است از المان های HTML5 پشتیبانی نکنند پیشنهاد می شود حتما فرمت ورودی تایم را در placeholder به کاربر اعلام کنید.

نحوه استفاده:

<input type="week"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

 

مثال:

index.html

<script>
angular.module('weekExample', [])
  .controller('DateController', ['$scope', function($scope) {
    $scope.example = {
      value: new Date(2013, 0, 3)
    };
  }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
  <label>Pick a date between in 2013:
    <input id="exampleInput" type="week" name="input" ng-model="example.value"
           placeholder="YYYY-W##" min="2012-W32"
           max="2013-W52" required />
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
    <span class="error" ng-show="myForm.input.$error.week">
        Not a valid date!</span>
  </div>
  <tt>value = {{example.value | date: "yyyy-Www"}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>

 

دایرکتیو ngApp

از این دایرکتیو برای راه اندازی اولیه یک اپلیکیشن انگولار استفاده می شود. این دایرکتیو مشخص کننده المان ریشه یا root element اپلیکیشن های انگولاری می باشد و معمولا نزدیک المان روت صفحه (مثلا html یا body) تعریف می شود. استفاده از دایرکتیو ngApp ساده ترین و رایج ترین روش برای راه اندازی یک اپلیکیشن انگولار می باشد.

مثال:

index.html

<div ng-controller="ngAppDemoController">
  I can add: {{a}} + {{b}} =  {{ a+b }}
</div>

script.js

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});

 

دایرکتیو ngBind

اتریبیوت ngBind به انگولار می گوید که محتوای متنی المان html را با مقدار تعریف شده در عبارت مقابل آن جایگزین کند.
بطور معمول ما مستقیما از ngBind برای اینکار استفاده نمی کنیم بلکه از براکت دوتایی یا {{ و }} استفاده خواهیم کرد. در واقع عبارات زیر با یکدیگر معادل هستند:

<span ng-bind="name"></span>
<span>{{name}}</span>

نحوه استفاده:

<ANY
  ng-bind="expression">
...
</ANY>

مثال:

index.html

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

 

دایرکتیو ngBlur

برای تعریف یک رفتار مشخص هنگام رویداد blur

یادآوری: یک رویداد blur زمانی رخ می دهد که فکوس از روی المان موردنظر از بین برود.

نحوه استفاده:

<window, input, select, textarea, a
  ng-blur="expression">
...
</window, input, select, textarea, a>

 

دایرکتیو ngChange

به منظور اجرای دستورات خاص هنگام تغییر کردن مقدار input توسط کاربر بکار می رود.
به محض اعمال تغییر در input موردنظر توسط کاربر متد تعریف شده فراخوانی خواهد شد و با رویداد onchange جاوا اسکریپت تفاوت دارد (در javascript رویداد onchange پس از پایان تغییرات اجرا می شود).

نکته: برای استفاده از دایرکتیو ngChange حتما باید از دایرکتیو ngModel استفاده کنیم.

نحوه استفاده:

<input
  ng-change="expression">
...
</input>

 

دایرکتیو ngChecked

اگر دایرکتیو ngChecked برابر true باشد انگولار اتریبیوت checked را به المان چک باکس html را اضافه می کند.
نکته: دقت کنید که این دایرکتیو را نباید بهمراه دایرکتیو ngModel تعریف کنید زیرا ممکن است به نتایج ناخواسته برسید.

نحوه استفاده:

<INPUT
  ng-checked="expression">
...
</INPUT>

مثال:

index.html

<label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/>
<input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">

 

دایرکتیو ngClass

توسط دایرکتیو ngClass می توان کلاس های css را بصورت داینامیک به المان های html اضافه کرد. اگر کلاس موردنظر از قبل وجود داشته باشد، این دایرکتیو یک کلاس تکراری به آن اضافه نخواهد کرد.
وقتی عبارت (expression) مقابل ngClass تغییر کند کلاس های css قبلی حذف شده و کلاس های جدید جایگزین آنها خواهند شد.

نحوه استفاده:

<ANY
  ng-class="expression">
...
</ANY>

مثال1)
در مثال زیر نحوه اتصال داده یا data binding توسط دایرکتیو ngClass ارائه شده است:

index.html

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
<label>
   <input type="checkbox" ng-model="deleted">
   deleted (apply "strike" class)
</label><br>
<label>
   <input type="checkbox" ng-model="important">
   important (apply "bold" class)
</label><br>
<label>
   <input type="checkbox" ng-model="error">
   error (apply "has-error" class)
</label>
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style"
       placeholder="Type: bold strike red" aria-label="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1"
       placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
<input ng-model="style2"
       placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
<input ng-model="style3"
       placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
<hr>
<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

style.css

.strike {
    text-decoration: line-through;
}
.bold {
    font-weight: bold;
}
.red {
    color: red;
}
.has-error {
    color: red;
    background-color: yellow;
}
.orange {
    color: orange;
}

مثال2)
در مثال زیر نحوه نمایش انیمیشن توسط دایرکتیو ngClass ارائه شده است:

index.html

<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar">Sample Text</span>

style.css

.base-class {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.base-class.my-class {
  color: red;
  font-size:3em;
}

 

دایرکتیوهای ngClassEven و ngClassOdd

دایرکتیوهای فوق دقیقا همانند دایرکتیو ngClass عمل می کنند با این تفاوت که بهمراه دایرکتیو ngRepeat بکار می روند و ngClassOdd روی المان های فرد تاثیر می گذارد و ngClassEven روی المان های زوج.

نحوه استفاده:

(بعنوان اتریبیوت)

<ANY
  ng-class-even="expression">
...
</ANY>

(بعنوان کلاس CSS)

<ANY class="ng-class-even: expression;"> ... </ANY>

مثال:

index.html

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{name}} &nbsp; &nbsp; &nbsp;
   </span>
  </li>
</ol>

style.css

.odd {
  color: red;
}
.even {
  color: blue;
}

 

دایرکتیو ngClick

به شما این امکان را می دهد که با کلیک روی المان موردنظر دستورات مشخص و رفتار خاصی اجرا شود.

نحوه استفاده:

<ANY
  ng-click="expression">
...
</ANY>

مثال:

index.html

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

 

دایرکتیو ngCloak:

این دایرکتیو به منظور جلوگیری از نمایش قالب html انگولار وقتی که هنوز بطور کامل کامپایل نشده بکار می رود. پس برای اینکه کاربر دیزاین نامناسبی را قبل از کامپایل کامل template مشاهده نکند می توانید از دایرکتیو ngCloak بهره ببرید.
NgCloak می تواند برای المان بدنه صفحه یعنی body تعریف شود اما استفاده بهتر از آن بدین صورت است که از چندین ngCloak برای بخش های مختلف یک صفحه استفاده شود تا قبل از لود کامل نمایش پیدا نکنند.
دایرکتیو ngCloak با همکاری استایل های زیر (که در فایل های angular.js و angular.min.js تعریف شده اند) کار می کند:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

هنگامی که استایل های بالا توسط مرورگر لود می شوند، تمام المان های html بهمراه المان های فرزندشان که با ngCloak نشانه گذاری شده باشند در لود اولیه صفحه مخفی هستند. پس از اینکه انگولار عملیات کامپایل تمپلیت را تکمیل کرد ngCloak حذف می شود و المان ها از حالت مخفی خارج خواهند شد و کاربر می تواند آنها را مشاهده کند.

مثال:

index.html

<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" class="ng-cloak">{{ 'world' }}</div>

 

دایرکتیو ngController

دایرکتیو ngController یک کلاس کنترولر به view اپلیکیشن اضافه می کند. این مبحث کلیدی در مدل MVC (Model-View-Controller) می باشد.

نحوه استفاده:

<ANY
  ng-controller="expression">
...
</ANY>

مثال:
در بخش زیر مثالی ساده از فرم ویرایش اطلاعات تماس کاربر را بیان کرده ایم. در این کنترولر 4 متد add, remove, clear, greet را تعریف می کنیم. هر تغییری که روی داده ها رخ دهد بلافاصله view سمت کاربر آپدیت می شود و نیازی به ریلود دستی صفحه توسط کاربر نمی باشد.

index.html

<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
  <label>Name: <input type="text" ng-model="settings.name"/></label>
  <button ng-click="settings.greet()">greet</button><br/>
  Contact:
  <ul>
    <li ng-repeat="contact in settings.contacts">
      <select ng-model="contact.type" aria-label="Contact method" id="select_{{$index}}">
         <option>phone</option>
         <option>email</option>
      </select>
      <input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" />
      <button ng-click="settings.clearContact(contact)">clear</button>
      <button ng-click="settings.removeContact(contact)" aria-label="Remove">X</button>
    </li>
    <li><button ng-click="settings.addContact()">add</button></li>
 </ul>
</div>

app.js

angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];
}

SettingsController1.prototype.greet = function() {
  alert(this.name);
};

SettingsController1.prototype.addContact = function() {
  this.contacts.push({type: 'email', value: 'yourname@example.org'});
};

SettingsController1.prototype.removeContact = function(contactToRemove) {
 var index = this.contacts.indexOf(contactToRemove);
  this.contacts.splice(index, 1);
};

SettingsController1.prototype.clearContact = function(contact) {
  contact.type = 'phone';
  contact.value = '';
};

 

دایرکتیو ngCopy

برای تعریف یک رفتار مشخص هنگام رویداد کپی کردن بکار می رود.

نحوه استفاده:

<window, input, select, textarea, a
  ng-copy="expression">
...
</window, input, select, textarea, a>

مثال:

index.html

<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
copied: {{copied}}

 

دایرکتیو ngCut

برای تعریف یک رفتار مشخص هنگام رویداد کات کردن بکار می رود.

نحوه استفاده:

<window, input, select, textarea, a
  ng-cut="expression">
...
</window, input, select, textarea, a>

مثال:

index.html

<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
cut: {{cut}}

 

دایرکتیو ngDblClick

به شما این امکان را می دهد که هنگام دابل کلیک کاربر یک رفتار خاصی اجرا شود.

نحوه استفاده:

<ANY
  ng-dblclick="expression">
...
</ANY>

مثال:

index.html

<button ng-dblclick="count = count + 1" ng-init="count=0">
  Increment (on double click)
</button>
count: {{count}}

 

دایرکتیو ngDisabled

اگر مقدار عبارت مقابل این دایرکتیو برابر true باشد انگولار بطور اتوماتیک اتریبیوت یا صفت disabled را برای المان موردنظر تعریف می کند.

نحوه استفاده:

<INPUT
  ng-disabled="expression">
...
</INPUT>

مثال:

index.html

<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<button ng-model="button" ng-disabled="checked">Button</button>

 

دایرکتیو ngFocus

می توان یک رفتار مشخص را هنگام رویداد فوکوس اجرا کرد.

نحوه استفاده:

<window, input, select, textarea, a
  ng-focus="expression">
...
</window, input, select, textarea, a>

 

دایرکتیو ngForm

دایرکتیو ngForm نسخه تو در توی دایرکتیو form می باشد. HTML اجازه تعریف المان FORM به شکل تو در تو را نمی دهد. اما در مواقعی مانند اعتبارسنجی زیرفرم های یک فرم اصلی نیاز است المان فرم را به شکل nested تعریف کنیم.

نکته: هدف دایرکتیو ngForm فراهم کردن قابلیت تعریف تو در توی المان فرم است و در واقع هدف آن جایگزین شدن با تگ اصلی form (با تمام امکانات آن مانند ارسال فرم به سرور و…) نمی باشد.

نحوه استفاده:
(بعنوان المنت)

<ng-form
  [name="string"]>
...
</ng-form>

(بعنوان اتریبیوت)

<ANY
  [ng-form="string"]>
...
</ANY>

(بعنوان کلاس CSS)

<ANY class="[ng-form: string;]"> ... </ANY>

 

دایرکتیو ngHide

بر اساس مقداری که به اتریبیوت ngHide داده می شود می توان المان را مخفی (Hide) کرد یا نمایش (Show) داد. انگولار وقتی ببیند مقدار دایرکتیو ngHide برابر true است، بطور اتوماتیک کلاس css زیر را برای آن المان تعریف می کند.

Display: none !important;

و اگر مقدار اتریبیوت ngHide برابر false باشد، کلاس css فوق از المان حذف خواهد شد و المان مجددا نمایش می یابد.

بازنویسی استایل ngHide:

بطور پیش فرض انگولار توسط استایل display: none; المان ها را پنهان می کند. اما اگر بخواهید استایل دلخواه خود را برای مخفی سازی المان تعریف کنید می توانید بصورت زیر اقدام کنید:

.ng-hide {
  /* this is just another form of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

استایل فوق روش دیگری برای عدم نمایش یک المان در صفحات وب می باشد.

نحوه استفاده:

<ANY
  ng-hide="expression">
...
</ANY>

مثال:

index.html

Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br/>
<div>
  Show:
  <div class="check-element animate-hide" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div class="check-element animate-hide" ng-hide="checked">
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
  </div>
</div>

Glyphicons.css

@import url(../../components/bootstrap-3.1.1/css/bootstrap.css);

Animations.css

.animate-hide {
  transition: all linear 0.5s;
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-hide.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

.check-element {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

 

دایرکتیو ngHref

استفاده از عبارات انگولاری (مانند {{myUrl}}) بعنوان مقدار اتریبیوت href در اپلیکیشن های انگولاری منجر به آدرس اشتباه در لینک خواهد شد و با خطای 404 مواجه می شدیم. برای اینکه بتوان این مشکل را برطرف کرد انگولار دایرکتیو ngHref را معرفی کرد. بدین وسیله می توان از عبارات داینامیک انگولاری در براکت برای مقدار href لینک استفاده کرد.

روش نادرست تعریف href لینک:

<a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

روش صحیح تعریف href لینک:

<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

نحوه استفاده:

<A
  ng-href="template">
...
</A>

مثال:

index.html

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)

 

دایرکتیو ngIf

در انگولار می توان بوسیله دایرکتیو ngIf المانی را از DOM حذف کرد یا آن را مجددا تولید کرد. اگر مقداری که به اتریبیوت ngIf اختصاص داده می شود برابر false باشد المان موردنظر از DOM حذف می شود و اگر true باشد مجددا در DOM درج خواهد شد.
دقت کنید که ngIf با ngShow و ngHide فرق دارد. در واقع ngIf المان را بطور کلی از DOM حذف می کند یا آن را در DOM درج می کند. در حالیکه ngHide و ngShow فقط المان را توسط استایل های css از دید کاربر مخفی می کند.
نکته دیگر اینست که وقتی المانی توسط دایرکتیو ngIf حذف می شود scope مربوط به آن نیز حذف خواهد شد و پس از ایجاد مجدد آن، scope جدیدی به آن المان داده می شود.

نحوه استفاده:

<ANY
  ng-if="expression">
...
</ANY>

مثال:

index.html

<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
  This is removed when the checkbox is unchecked.
</span>

 

دایرکتیو ngInit

به منظور تعریف اولیه و مقداردهی اولیه متغیرهای موردنظر در scope انگولار می توان از ngInit استفاده کرد. این دایرکتیو می تواند بطور نادرست مورد استفاده قرار بگیرد. بصورتی که برنامه نویس تعداد زیادی منطق های غیرضروری به اپلیکیشن انگولار اضافه کند.
از ngInit به تعداد معدودی می توان استفاده صحیح داشت. مثلا برای تعریف alias برای متغیر در ngRepeat (در مثال زیر استفاده شده است)، تزریق یا inject داده از سمت سرور و…

نکته: اگر همراه با استفاده از ngInit بخواهید از filter نیز استفاده کنید، حتما باید از پرانتز استفاده کنید. مانند کد زیر:

<div ng-init="test1 = ($index | toString)"></div>

نحوه استفاده:

(بعنوان اتریبیوت)

<ANY
  ng-init="expression">
...
</ANY>

(بعنوان کلاس CSS)

<ANY class="ng-init: expression;"> ... </ANY>

مثال:

index.html

<script>
  angular.module('initExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [['a', 'b'], ['c', 'd']];
    }]);
</script>
<div ng-controller="ExampleController">
  <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
    <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
       <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
    </div>
  </div>
</div>

 

دایرکتیو ngKeydown

برای اجرا کردن دستورات مشخص بهنگام رویداد Key-Down

نحوه استفاده:

<ANY
  ng-keydown="expression">
...
</ANY>

مثال:

index.html

<input ng-keydown="count = count + 1" ng-init="count=0">
key down count: {{count}}

 

دایرکتیو ngKeypress

برای اجرا کردن دستورات مشخص بهنگام رویداد Key-Press

نحوه استفاده:

<ANY
  ng-keypress="expression">
...
</ANY>

مثال:

index.html

<input ng-keypress="count = count + 1" ng-init="count=0">
key press count: {{count}}

 

دایرکتیو ngKeyup

برای اجرا کردن دستورات مشخص بهنگام رویداد Key-Up

نحوه استفاده:

<ANY
  ng-keyup="expression">
...
</ANY>

مثال:

index.html

<p>Typing in the input box below updates the key count</p>
<input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}

<p>Typing in the input box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>

 

دایرکتیو ngList

برای نمایش آرایه ای از رشته ها در المان input بکار می رود. جداکننده آیتم های آرایه بطور پیش فرض “, “ می باشد. یعنی یک ویرگول یا comma و سپس یک فاصله یا space
اما اگر بخواهید این جداکننده را تغییر دهید می توانید آن را بصورت ng-list=” | ” تعریف کنید.

مثال:

index.html

<form name="myForm" ng-controller="ExampleController">
 <label>List: <input name="namesInput" ng-model="names" ng-list required></label>
 <span role="alert">
   <span class="error" ng-show="myForm.namesInput.$error.required">
   Required!</span>
 </span>
 <br>
 <tt>names = {{names}}</tt><br/>
 <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
 <tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
 <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
 <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>

app.js

angular.module('listExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.names = ['morpheus', 'neo', 'trinity'];
}]);

 

دایرکتیوهای ngMaxlength و ngMinlength

دایرکتیو ngMaxLength قابلیت اعتبارسنجی حداکثر طول یا Max-Length را به ngModel اضافه می کند. به همین ترتیب ngMinLength برای سنجش کمترین طول بکار می رود.
این نوع دایرکتیوها معمولا برای input های متنی بکار می رود. هرچند می توان از آن در input های نوع دیگر نیز استفاده کرد.

نحوه استفاده:

<ANY>
...
</ANY>

مثال:

index.html

<script>
  angular.module('ngMaxlengthExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.maxlength = 5;
    }]);
</script>
<div ng-controller="ExampleController">
  <form name="form">
    <label for="maxlength">Set a maxlength: </label>
    <input type="number" ng-model="maxlength" id="maxlength" />
    <br>
    <label for="input">This input is restricted by the current maxlength: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br>
    <hr>
    input valid? = <code>{{form.input.$valid}}</code><br>
    model = <code>{{model}}</code>
  </form>
</div>

 

دایرکتیو ngModel

دایرکتیو ngModel مقدار یک input، textarea، select یا هر نوع input دیگر را به یک property از scope مربوطه متصل (bind) می کند.

وظایف دایرکتیو ngModel:

  • اتصال view به model و برعکس در المان های html مانند input-textarea-select
  • فراهم کردن قابلیت اعتبارسنجی مثلا برای email-url-number
  • نگه داشتن وضعیت کنترل مانند valid/invalid, dirty/pristine, touched/untouched
  • تعریف کلاس های css در المنت ها مانند ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty

نکته: اتریبیوت ngModel سعی می کند ابتدا property موردنظر را در scope مربوطه پیدا کند اما اگر یافت نشد یک property با آن نام می سازد.

کلاس های CSS:

کلاس های css زیر می توانند با توجه به مقدار و اعتبار مدل در ngModel به المان موردنظر اضافه شوند یا از آن حذف شوند.

  • ng-valid: مدل معتبر است
  • ng-invalid: مدل نامعتبر است
  • ng-pristine: کنترل هنوز دستکاری نشده است
  • ng-dirty: کنترل دست خورده است
  • ng-touched: کنترل از فوکوس خارج شده است.
  • ng-untouched: کنترل از فوکوس خارج نشده است.
  • ng-pending: هیچ $asyncValidators انجام نشده است.
  • ng-empty: کنترل هیچ مقداری ندارد.
  • ng-not-empty: کنترل شامل مقدار است.

نحوه استفاده:

<input>
...
</input>

مثال:

index.html

<script>
 angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.val = '1';
   }]);
</script>
<style>
  .my-input {
    transition:all linear 0.5s;
    background: transparent;
  }
  .my-input.ng-invalid {
    color:white;
    background: red;
  }
</style>
<p id="inputDescription">
 Update input to see transitions when valid/invalid.
 Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
  <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

 

دایرکتیو ngMousedown

دایرکتیو ngMousedown این امکان را به شما می دهد تا هنگام رویداد Mouse-Down دستورات موردنظر شما اجرا شود.

نحوه استفاده:

<ANY
  ng-mousedown="expression">
...
</ANY>

مثال:

index.html

<button ng-mousedown="count = count + 1" ng-init="count=0">
  Increment (on mouse down)
</button>
count: {{count}}

 

دایرکتیو ngMouseenter

دایرکتیو ngMouseenter این امکان را به شما می دهد تا هنگام رویداد Mouse-Enter دستورات موردنظر شما اجرا شود.

نحوه استفاده:

<ANY
  ng-mouseenter="expression">
...
</ANY>

مثال:

index.html

<button ng-mouseenter="count = count + 1" ng-init="count=0">
  Increment (when mouse enters)
</button>
count: {{count}}

 

دایرکتیو ngMouseleave

دایرکتیو ngMouseleave این امکان را به شما می دهد تا هنگام رویداد Mouse-Leave دستورات موردنظر شما اجرا شود.

نحوه استفاده:

<ANY
  ng-mouseleave="expression">
...
</ANY>

مثال:

index.html

<button ng-mouseleave="count = count + 1" ng-init="count=0">
  Increment (when mouse leaves)
</button>
count: {{count}}

 

دایرکتیو ngMousemove

دایرکتیو ngMousemove این امکان را به شما می دهد تا هنگام رویداد Mouse-Move دستورات موردنظر شما اجرا شود.

نحوه استفاده:

<ANY
  ng-mousemove="expression">
...
</ANY>

مثال:

index.html

<button ng-mousemove="count = count + 1" ng-init="count=0">
  Increment (when mouse moves)
</button>
count: {{count}}

 

دایرکتیو ngMouseover

دایرکتیو ngMouseover این امکان را به شما می دهد تا هنگام رویداد Mouse-Over دستورات موردنظر شما اجرا شود.

نحوه استفاده:

<ANY
  ng-mouseover="expression">
...
</ANY>

مثال:

index.html

<button ng-mouseover="count = count + 1" ng-init="count=0">
  Increment (when mouse is over)
</button>
count: {{count}}

 

دایرکتیو ngMouseup

دایرکتیو ngMouseup این امکان را به شما می دهد تا هنگام رویداد Mouse-Up دستورات موردنظر شما اجرا شود.

نحوه استفاده:

<ANY
  ng-mouseup="expression">
...
</ANY>

مثال:

index.html

<button ng-mouseup=”count = count + 1” ng-init=”count=0”>
  Increment (on mouse up)
</button>
count: {{count}}

 

دایرکتیو ngOpen

افزودن اتریبیوت open به المان در صورت true بودن مقدار ngOpen

نحوه استفاده:

<DETAILS
  ng-open="expression">
...
</DETAILS>

مثال:

index.html

<label>Check me check multiple: <input type="checkbox" ng-model="open"></label><br/>
<details id="details" ng-open="open">
   <summary>Show/Hide me</summary>
</details>

 

دایرکتیو ngOptions

از دایرکتیو ngOptions می توان برای تولید آیتم های المان select بصورت داینامیک استفاده کرد.
اگرچه در اغلب موارد می توان با استفاده از ngRepeat لیست آیتم های المان select را به شکل داینامیک تولید کرد. اما استفاده از ngOptions مزایایی دارد. مانند مصرف کمتر حافظه و سرعت بیشتر (به این دلیل که برای هرکدام از آیتم ها یک scope مجزا تعریف نمی کند).

وقتی یک آیتم یا option از لیست select توسط کاربر انتخاب می شود مقدار آیتم انتخابی (value) به مدل ngModel متصل یا bind می شود.

نحوه استفاده:

<ANY
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="string"]
  [ng-options="comprehension_expression"]>
...
</ANY>

مثال:

index.html

<script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light', notAnOption: true},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark', notAnOption: true},
      {name:'yellow', shade:'light', notAnOption: false}
    ];
    $scope.myColor = $scope.colors[2]; // red
  }]);
</script>
<div ng-controller="ExampleController">
  <ul>
    <li ng-repeat="color in colors">
      <label>Name: <input ng-model="color.name"></label>
      <label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
      <button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
    </li>
    <li>
      <button ng-click="colors.push({})">add</button>
    </li>
  </ul>
  <hr/>
  <label>Color (null not allowed):
    <select ng-model="myColor" ng-options="color.name for color in colors"></select>
  </label><br/>
  <label>Color (null allowed):
  <span  class="nullable">
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
  </span></label><br/>

  <label>Color grouped by shade:
    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
    </select>
  </label><br/>

  <label>Color grouped by shade, with some disabled:
    <select ng-model="myColor"
          ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
    </select>
  </label><br/>



  Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
  <br/>
  <hr/>
  Currently selected: {{ {selected_color:myColor} }}
  <div style="border:solid 1px black; height:20px"
       ng-style="{'background-color':myColor.name}">
  </div>
</div>

 

دایرکتیو ngPaste:

اجرای یک رفتار مشخص هنگام رویداد paste

نحوه استفاده:

<window, input, select, textarea, a
  ng-paste="expression">
...
</window, input, select, textarea, a>

مثال:

index.html

<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
pasted: {{paste}}

 

دایرکتیو ngPattern

توسط ngPattern می توان اعتبارسنجی الگو یا pattern validator را به ngModel در انگولار اعمال نمایید.

دایرکتیو ngPattern معمولا برای input های متنی بکار می رود اما می توان از آن برای انواع دیگر input نیز استفاده کرد.

نحوه استفاده:

<ANY>
...
</ANY>

مثال:

index.html

<script>
  angular.module('ngPatternExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.regex = '\\d+';
    }]);
</script>
<div ng-controller="ExampleController">
  <form name="form">
    <label for="regex">Set a pattern (regex string): </label>
    <input type="text" ng-model="regex" id="regex" />
    <br>
    <label for="input">This input is restricted by the current pattern: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" /><br>
    <hr>
    input valid? = <code>{{form.input.$valid}}</code><br>
    model = <code>{{model}}</code>
  </form>
</div>

 

دایرکتیو ngReadonly

اگر مقدار دایرکتیو ngReadonly برابر true باشد انگولار یک اتریبیوت readOnly  به المان موردنظر اضافه می کند.

نحوه استفاده:

<INPUT
  ng-readonly="expression">
...
</INPUT>

مثال:

index.html

<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />

 

دایرکتیو ngRequired

به منظور تعریف اتریبیوت required برای ngModel از ngRequired استفاده می شود.

از دایرکتیو ngRequired معمولا برای input و select استفاده می شود اما می توان آن را برای انواع دیگر المان ها نیز بکار برد.

اگر مقدار عبارت ngRequired برابر true باشد انگولار اتریبیوت required را به المان موردنظر اضافه خواهد کرد. اگر فیلدی که از ngRequired استفاده می کند خالی رها شود و مقداری برای آن در نظر گرفته نشود آیتم required از error key انگولار برابر true خواهد شد و می توان از آن برای نمایش پیغام خطای اعتبارسنجی استفاده کرد.

{{form.input.$error.required}}

نحوه استفاده:

<ANY>
...
</ANY>

مثال:

index.html

<script>
  angular.module('ngRequiredExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.required = true;
    }]);
</script>
<div ng-controller="ExampleController">
  <form name="form">
    <label for="required">Toggle required: </label>
    <input type="checkbox" ng-model="required" id="required" />
    <br>
    <label for="input">This input must be filled if `required` is true: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-required="required" /><br>
    <hr>
    required error set? = <code>{{form.input.$error.required}}</code><br>
    model = <code>{{model}}</code>
  </form>
</div>

 

دایرکتیو ngSelected

اگر مقدار عبارت ngSelected برابر true باشد انگولار بلافاصله اتریبیوت selected را برای المان موردنظر تعریف می کند.

نحوه استفاده:

<OPTION
  ng-selected="expression">
...
</OPTION>

مثال:

index.html

<label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/>
<select aria-label="ngSelected demo">
  <option>Hello!</option>
  <option id="greet" ng-selected="selected">Greetings!</option>
</select>

 

دایرکتیو ngShow

توسط دایرکتیو ngShow می توان مخفی بودن یا نبودن المان موردنظر را در انگولار تعیین کرد.

اگر مقدار عبارت ngShow برابر true باشد المان نمایش می یابد و اگر برابر false باشد المان از دید کاربر پنهان می شود.

همانطور که در توضیحات دایرکتیو ngHide عرض کردیم انگولار با تعریف استایل display: none !important المان هدف را پنهان می کند یا نمایش می دهد.

نحوه استفاده:

<ANY
  ng-show="expression">
...
</ANY>

مثال:

index.html

Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
  Show:
  <div class="check-element animate-show" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div class="check-element animate-show" ng-hide="checked">
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
  </div>
</div>

Glyphicons.css

@import url(../../components/bootstrap-3.1.1/css/bootstrap.css);

Animations.css

.animate-show {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

.check-element {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

 

دایرکتیو ngSrc

دایرکتیو ngSrc برای المان تصاویر (تگ <img>) همانند ngHref است برای لینک ها (تگ <a>).

اگر از عبارت انگولاری {{myUrl}} بعنوان مقدار اتریبیوت src تصویر استفاده شود با خطای منطقی مواجه خواهید شد و آدرس اشتباهی برای تصویر تعریف می شود. دایرکتیو ngSrc این مشکل را حل کرده است.

(روش نادرست تعریف آدرس تصویر)

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

(روش صحیح تعریف آدرس تصویر)

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

نحوه استفاده:

<IMG
  ng-src="template">
...
</IMG>

 

دایرکتیو ngStyle

بوسیله دایرکتیو ngStyle می توان استایل های css شرطی را برای تگ های html تعریف کرد.

نحوه استفاده:

(بعنوان اترییبیوت)

<ANY
  ng-style="expression">
...
</ANY>

(بعنوان کلاس CSS)

<ANY class="ng-style: expression;"> ... </ANY>

مثال:

index.html

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

Style.css

span {
  color: black;
}

 

دایرکتیو ngSubmit

برای اتصال یا bind کردن عبارات انگولاری هنگام رویداد submit فرم

علاوه بر این، ngSubmit از اکشن پیش فرض یا default action جلوگیری می کند (اکشن submit بطور پیش فرض داده های فرم را به سرور ارسال می کند و باعث ریلود صفحه می شود).

هشدار: استفاده همزمان از ngClick و ngSubmit ممکن است باعث “ثبت مجدد” یا double-submission شود. دقت کنید.

نحوه استفاده:

<form
  ng-submit="expression">
...
</form>

مثال:

index.html

<script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.text = 'hello';
      $scope.submit = function() {
        if ($scope.text) {
          $scope.list.push(this.text);
          $scope.text = '';
        }
      };
    }]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>
</form>

 

دایرکتیو ngSwitch

این دایرکتیو برای سوئیچ کردن شرطی ساختار DOM در یک scope مشخص بکار می رود.

در واقع ngSwitch بر اساس مقدار انتخابی کاربر المان مرتبط و منطبق با آن را نمایش می دهد. به عبارتی دیگر شما عبارت ng-switch=”…” را برای المان والد تعریف می کنید و برای هریک از المان های فرزند آن عبارت ng-switch-when=”someVal” را در نظر بگیرید. عبارت whenمشخص می کند که به ازای آیتم انتخاب شده کاربر کدام المان نمایش پیدا کند.

نحوه استفاده:

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

مثال:

index.html

<div ng-controller="ExampleController">
  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <code>selection={{selection}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="selection">
      <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
      <div class="animate-switch" ng-switch-when="home">Home Span</div>
      <div class="animate-switch" ng-switch-default>default</div>
  </div>
</div>

script.js

angular.module('switchExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.items = ['settings', 'home', 'other'];
  $scope.selection = $scope.items[0];
}]);

Animations.css

.animate-switch-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

.animate-switch {
  padding:10px;
}

.animate-switch.ng-animate {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.animate-switch.ng-leave.ng-leave-active,
.animate-switch.ng-enter {
  top:-50px;
}
.animate-switch.ng-leave,
.animate-switch.ng-enter.ng-enter-active {
  top:0;
}

 

دایرکتیو ngValue

به منظور اتصال یا bind کردن عبارت انگولاری موردنظر با مقدار <option> یا input(radio) بنابراین پس از اینکه آیتمی انتخاب شد ngModel آن المان برابر با مقدار تعیین شده می شود.

یکی از موارد استفاده ngValue زمانیست که چند دکمه رادیویی یا radio button داریم که توسط ngRepeat بصورت داینامیک تولید می شوند. (مثال زیر)

به همین ترتیب از ngValue می توان برای تولید آیتم های option در المان select استفاده کرد. در این مورد فقط نوع رشته ای یا string را می توان بعنوان مقدار اتریبیوت value تعریف کرد. بنابراین ngModel خروجی همیشه از نوع string خواهد بود.

نحوه استفاده:

<input
  [ng-value="string"]>
...
</input>

مثال:

index.html

<script>
   angular.module('valueExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.names = ['pizza', 'unicorns', 'robots'];
       $scope.my = { favorite: 'unicorns' };
     }]);
</script>
 <form ng-controller="ExampleController">
   <h2>Which is your favorite?</h2>
     <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id="{{name}}"
              name="favorite">
     </label>
   <div>You chose {{my.favorite}}</div>
 </form>

 

دایرکتیو select

المان select در html با قابلیت اتصال داده انگولار (data-binding)

دایرکتیو select بهمراه ngModel بکار می رود و عملیات اتصال داده یا data binding را بین المان select و scope انجام می دهد. همچنین select می تواند آیتم هایی که بطور داینامیک توسط ngRepeat یا ngOptions تولید شده اند را handle کند.

وقتی یک آیتم از المان select انتخاب می شود مورد انتخاب شده (selected option) به مدل یعنی ngModel متصل (bind) می شود. دقت کنید که مقدار دایرکتیو select در صورتیکه بدون استفاده از ngOptions تولید شده باشد همیشه از نوع string خواهد بود. در بسیاری از موارد می توانید از ngRepeat بجای ngOptions استفاده کنید. اگرچه هر کدام از آنها مزیت های خود را دارند.

نحوه استفاده:

<select
  ng-model="string"
  [name="string"]
  [multiple="string"]
  [required="string"]
  [ng-required="string"]
  [ng-change="string"]
  [ng-options="string"]>
...
</select>

مثال 1): استفاده از select بطور پیش فرض و استاتیک

index.html

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="singleSelect"> Single select: </label><br>
    <select name="singleSelect" ng-model="data.singleSelect">
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select><br>

    <label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
    <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
      <option value="">---Please select---</option> <!-- not selected / blank option -->
      <option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
      <option value="option-2">Option 2</option>
    </select><br>
    <button ng-click="forceUnknownOption()">Force unknown option</button><br>
    <tt>singleSelect = {{data.singleSelect}}</tt>

    <hr>
    <label for="multipleSelect"> Multiple select: </label><br>
    <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select><br>
    <tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
  </form>
</div>

app.js

angular.module('staticSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    singleSelect: null,
    multipleSelect: [],
    option1: 'option-1',
   };

   $scope.forceUnknownOption = function() {
     $scope.data.singleSelect = 'nonsense';
   };
}]);

 

مثال 2): استفاده از ngRepeat برای تولید آیتم های select

index.html

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>

app.js

angular.module('ngrepeatSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    repeatSelect: null,
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
   };
}]);

 

مثال 3): استفاده از ngOptions و تعریف مقدار پیش فرض

index.html

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

app.js

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
    };
}]);

 

دایرکتیو textarea

المان textarea در html با قابلیت data-binding انگولار

مباحث اعتبارسنجی و اتصال داده textarea همانند المان input است.

نحوه استفاده:

<textarea
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="string"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [ng-pattern="string"]
  [ng-change="string"]
  [ng-trim="boolean"]>
...
</textarea>

 

مقاله آموزشی دایرکتیوهای انگولار جی‌اس در اینجا به پایان می رسد. در این مقاله سعی کردیم لیست تمام دایرکتیوهای AngularJS 1.5.5 را بیان کرده و هریک را با ذکر مثال شرح دهیم.

فهرست مطالب پنهان
1 دایرکتیو ngForm:
1.1 سناریوهای مختلف ثبت فرم در انگولار:
1.2 کلاس های css در فرم های انگولار:
2 دایرکتیو a
3 دایرکتیو input
4 دایرکتیو input[checkbox]
5 دایرکتیو input[date]
6 دایرکتیو input[datetime-local]
7 دایرکتیو input[email]
8 دایرکتیو input[month]
9 دایرکتیو input[number]
10 دایرکتیو input[radio]
11 دایرکتیو input[text]
12 دایرکتیو input[time]
13 دایرکتیو input[url]
14 دایرکتیو input[week]
15 دایرکتیو ngApp
16 دایرکتیو ngBind
17 دایرکتیو ngBlur
18 دایرکتیو ngChange
19 دایرکتیو ngChecked
20 دایرکتیو ngClass
21 دایرکتیوهای ngClassEven و ngClassOdd
22 دایرکتیو ngClick
23 دایرکتیو ngCloak:
24 دایرکتیو ngController
25 دایرکتیو ngCopy
26 دایرکتیو ngCut
27 دایرکتیو ngDblClick
28 دایرکتیو ngDisabled
29 دایرکتیو ngFocus
30 دایرکتیو ngForm
31 دایرکتیو ngHide
31.1 بازنویسی استایل ngHide:
32 دایرکتیو ngHref
32.1 روش نادرست تعریف href لینک:
32.2 روش صحیح تعریف href لینک:
33 دایرکتیو ngIf
34 دایرکتیو ngInit
35 دایرکتیو ngKeydown
36 دایرکتیو ngKeypress
37 دایرکتیو ngKeyup
38 دایرکتیو ngList
39 دایرکتیوهای ngMaxlength و ngMinlength
40 دایرکتیو ngModel
40.1 وظایف دایرکتیو ngModel:
40.2 کلاس های CSS:
41 دایرکتیو ngMousedown
42 دایرکتیو ngMouseenter
43 دایرکتیو ngMouseleave
44 دایرکتیو ngMousemove
45 دایرکتیو ngMouseover
46 دایرکتیو ngMouseup
47 دایرکتیو ngOpen
48 دایرکتیو ngOptions
49 دایرکتیو ngPaste:
50 دایرکتیو ngPattern
51 دایرکتیو ngReadonly
52 دایرکتیو ngRequired
53 دایرکتیو ngSelected
54 دایرکتیو ngShow
55 دایرکتیو ngSrc
55.1 (روش نادرست تعریف آدرس تصویر)
55.2 (روش صحیح تعریف آدرس تصویر)
56 دایرکتیو ngStyle
57 دایرکتیو ngSubmit
58 دایرکتیو ngSwitch
59 دایرکتیو ngValue
60 دایرکتیو select
61 دایرکتیو textarea
اشتراک گذاری:
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

آموزش وب پک

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید