Thursday 25 February 2016

Angularjs Events

 
 
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Angularjs/angular.js"></script>
    <script src="Script/AngularjsEvents.js"></script>   
</head>
<body ng-app="myApp" ng-controller="myController">
    <table border="1" cellpadding="6px" cellspacing="0">
        <thead>
            <tr>
                <th>
                    Languages
                </th>
                <th>
                    Likes
                </th>
                <th>
                    DisLikes
                </th>
                <th>
                    Likes/Dislikes
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="language in languages">
                <td>
                    {{language.name}}
                </td>
                <td align="center">
                    {{language.Likes}}
                </td>
                <td align="center">
                    {{language.Dislikes}}
                </td>
                <td>
                    <input type="button" value="Likes" ng-click="incrementLikes(language)" />
                    <input type="button" value="Dislikes" ng-click="incrementDisLikes(language)" />
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
JS
/// <reference path="../Angularjs/angular.js" />
var app = angular.module("myApp",[])
                 .controller("myController", function ($scope) {
                     var languages = [
                         { name: "Asp.net", "Likes": 0, "Dislikes": 0 },
                         { name: "MVC", "Likes": 0, "Dislikes": 0 },
                         { name: "C#", "Likes": 0, "Dislikes": 0 },
                         { name: "Angularjs", "Likes": 0, "Dislikes": 0 },
                         { name: "Javascript", "Likes": 0, "Dislikes": 0 },
                         { name: "Jquery", "Likes": 0, "Dislikes": 0 },
                     ];
                     $scope.languages = languages;
                     $scope.incrementLikes = function (language) {
                         language.Likes++;
                     }
                     $scope.incrementDisLikes = function (language) {
                         language.Dislikes++;
                     }
                 })

No comments:

Post a Comment