در این مقاله ، خواهیم دید که چگونه eventها (رویدادها)در AngularJS مدیریت می شوند و آن را دریک برنامه ی ساده پیاده سازی می کنیم و سپس به بررسی آن می پردازیم.

برای شروع کار ، ما می خواهیم پروفایل های پرسنل مختلف را را نمایش دهیم و نشان دهیم که یک پروفایل چند تا likes/dislikes دارد،  برای like و dislike از دکمه هایی که همراه با آن  است استفاده میکنیم.

بدلیل استفاده از دایرکتیو ng-repeat ابتدا مقاله  قبلی را مطالعه کنید.

معرفی:

همانطور که گفتیم ، ابتدا پروفایل های افراد مختلف را نمایش می دهیم . برای این کار ما نیاز به ایجاد یک آرایه داریم:

Var persons = [] ;

حال، در آرایه ی Persons ، نام را ارسال می کنیم ، به عنوان مثال نام پروفایل مربوطه، تعداد likeها و dislikeها

ابتدا ، مقدار آن را مساوی صفر قرار می دهیم ، و در نهایت مقدار آن را به پارامتر $scope ، پاس میدهیم.

var mypartone = angular.module("mymodule", []).controller("myController", function ($scope) {
    var persons = [{
        name: "ایمان",
        likes: 0,
        dislikes: 0
    }, {
        name: "سجاد",
        likes: 0,
        dislikes: 0
    }, {
        name: "علی",
        likes: 0,
        dislikes: 0
    }, {
        name: "فاطمه",
        likes: 0,
        dislikes: 0
    }, ];

همچنین ، ما نام های متفاوتی برای پروفایل ها داریم مانند : ایمان  ، سجاد، علی ، فاطمه  .ابتدا ، مقدار like و dislike را صفر قرار داده ایم  و به آرایه ها انتساب داده ایم.

حال ، باید عملکرد like و dislike را افزایش دهیم.برای این کار نیاز به ایجاد یک تابع برای like و  dislikeداریم .

حال ، ما یک تابع به نام likes ایجاد می کنیم و به object  ی به نام $scope انتساب میدهیم.

1.	$scope.incrementLikes = function(per)  
2.	{  
3.	    per.likes++;  
4.	}  

$scope ، تعداد likeها را افزایش می دهد.در این تابع ، ما باید تعداد likeها را افزایش دهیم بنابراین ما از ++  استفاده کرده ایم .به طور مشابه ، ما این کار را باید برای dislike انجام دهیم.

1.	$scope.incrementDislikes = function(per)   
2.	{  
3.	    per.dislikes++;  
4.	}  

در نتیجه کد نهایی ما به شکل زیر است:

var mypartone = angular.module("mymodule", []).controller("myController", function ($scope) {
    var persons = [{
        name: "ایمان",
        likes: 0,
        dislikes: 0
    }, {
        name: "سجاد",
        likes: 0,
        dislikes: 0
    }, {
        name: "علی",
        likes: 0,
        dislikes: 0
    }, {
        name: "فاطمه",
        likes: 0,
        dislikes: 0
    }, ];
    $scope.persons = persons;
    $scope.incrementLikes = function (per) {
        per.likes++;
    }
    $scope.incrementDislikes = function (per) {
        per.dislikes++;
    }
});

حال، ما برای نمایش Likeها، Dislikeها و دکمه ها  به 4 تا <th>  نیاز داریم .

بنابراین ، 4 تا <th> را اضافه می کنیم.

<th>Name</th>  
<th>Likes</th>  
<th>Dislikes</th>  
<th>Likes/Dislikes</th>

حال ، ما به حلقه ای برای رکوردهای اسامی مختلف نیاز داریم.بنابراین ما به سراغ استفاده از <tbody> می رویم و در آن از دایرکتیو ng-repeat برای ایجاد حلقه ی این رکوردها استفاده می کنیم.

بنابراین، <tbody> را اضافه کنید.

•  <tbody>  
•  <tr ng-repeat=”per in persons”>  
•  </tr>  
•  </tbody> 

حال ، باید دو دکمه برای like و dislike ایجاد کنیم .بنابراین ، دو دکمه به کمک  تگ input ایجاد کردیم.

<td>
<input type="button" value="Like"

حال ، بعد از مقدار،  ng-click  را اضافه خواهیم کرد. کاری که انجام می دهد این است که تابع را فراخوانی میکند.

1.	$scope.incrementLikes = function (per)
2.	 {  
3.	     per.likes++;  
4.	  }  

برای افزایش تعداد likeها می باشد.

حال، ما تابع را برای افزایش تعداد لایک ها ، به ng-click پاس می دهیم .

ng-click="incrementLikes(per)"

بنابراین ، کد نهایی ما به شکل زیر است:

1.	<input type="button" value="Like" ng-click="incrementLikes(per)" />  

به طور مشابه ، همین کار را برای دکمه ی dislike انجام میدهیم.

1.	<td>  
2.	<input type="button" value="DisLike" ng-click="incrementDislikes(per)" />  
3.	</td>  

کد نهایی:

1.	<table>  
2.	    <thead>  
3.	        <tr>  
4.	            <th>Name</th>  
5.	             <th>Likes</th>  
6.	             <th>Dislikes</th>  
7.	             <th>Likes/Dislikes</th>  
8.	        </tr>  
9.	    </thead>  
10.	    <tbody>  
11.	        <tr ng-repeat="per in persons">  
12.	            <td>{{per.name}}</td>  
13.	            <td>{{per.likes}}</td>  
14.	             <td>{{per.dislikes}}</td>  
15.	            <td>  
16.	                <input type="button" value="Like" ng-click="incrementLikes(per)" />  
17.	  
18.	            </td>  
19.	            <td>  
20.	                <input type="button" value="DisLike" ng-click="incrementDislikes(per)" />  
21.	            </td>  
22.	        </tr>  
23.	  
24.	    </tbody>  
25.	</table>  

حال برنامه را اجرا می گیریم و خروجی را به شکل زیر خواهیم دید:

آموزش angular