Let us understand with an example. Here is what we want to do.


1. Display the list of technologies in a table

2. Provide the ability to like and dislike a technology

3. Increment the likes and dislikes when the respective buttons are clicked

Script.js : In the controller function we have 2 methods to increment likes and dislikes. Both the functions have the technology object that we want to like or dislike as a parameter.

 var app = angular

            .module("myModule", [])

            .controller("myController", function ($scope) {

                var technologies = [

                    { name: "C#", likes: 0, dislikes: 0 },

                    { name: "ASP.NET", likes: 0, dislikes: 0 },

                    { name: "SQL", likes: 0, dislikes: 0 },

                    { name: "AngularJS", likes: 0, dislikes: 0 }

                ];

                $scope.technologies = technologies;

                $scope.incrementLikes = function (technology) {

                    technology.likes++;

                };

                $scope.incrementDislikes = function (technology) {

                    technology.dislikes++;

                };

            });

HtmlPage1.html : Notice in the html below, we are associating incrementLikes() and incrementDislikes() functions with the respective button. When any of these buttons are clicked, the corresponsing technology object is automatically passed to the function, and the likes or dislikes property is incremented depending on which button is clicked.

 <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Likes</th>

                    <th>Dislikes</th>

                    <th>Like/Dislike</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="technology in technologies">

                    <td> {{ technology.name }} </td>

                    <td style="text-align:center"> {{ technology.likes }} </td>

                    <td style="text-align:center"> {{ technology.dislikes }} </td>

                    <td>

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

                        <input type="button" ng-click="incrementDislikes(technology)" value="Dislike" />

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

Styles.css : Styles for table, td and th elements

 table {

    border-collapse: collapse;

    font-family:Arial;

}

td {

    border: 1px solid black;

    padding: 5px;

}

th {

    border: 1px solid black;

    padding: 5px;

    text-align: left;

}
 

Part 7Handling events in AngularJS的更多相关文章

  1. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

  2. Angularjs 源码

    /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...

  3. 说说Angular中的$timeOut定时器

     非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇 ...

  4. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  5. Scope Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  6. Angular 下的 function

    angular.lowercas 将指定的字符串转换为小写的 Usage(使用方法) angular.lowercase(string);   Arguments Param Type Details ...

  7. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  8. Angular1.x 基础总结

    官方文档:Guide to AngularJS Documentation   w3shools    angularjs教程  wiki   <AngularJS权威教程> Introd ...

  9. $timeout()定时器

    非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇到 ...

随机推荐

  1. javascript实现继承的方式

    this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用a ...

  2. Codeforces Gym 100015C City Driving 离线LCA

    City Driving 题目连接: http://codeforces.com/gym/100015/attachments Description You recently started fre ...

  3. VK Cup 2012 Qualification Round 2 C. String Manipulation 1.0 字符串模拟

    C. String Manipulation 1.0 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/pr ...

  4. Codeforces Beta Round #29 (Div. 2, Codeforces format) C. Mail Stamps 离散化拓扑排序

    C. Mail Stamps Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/problem ...

  5. vs 设置生成的实体为复数

  6. 对jquery的 attr()和prop()理解

    jquery1.6版本后引入了prop()方法,很多时候总是混淆attr()与prop()这俩,下面分析一下这俩的区别 在此之前,先来了解一下html 的attribute和property,因为jq ...

  7. Sharepoint 列表ItemAdding事件判断文件类型、获取当前上传的文件

    using System; using System.Security.Permissions; using Microsoft.SharePoint; using Microsoft.SharePo ...

  8. errno多线程安全（转载）

    一.errno的由来     在C编程中,errno是个不可缺少的变量,特别是在网络编程中.如果你没有用过errno,那只能说明你的程序不够健壮.当然,如果你是WIN32平台的GetLastError ...

  9. Windows 之 CMD命令

    1. ipconfig 查看 Windows IP 配置 2. ping IP地址 查看远程IP是否通畅 2. ipconfig/flushdns 刷新和重置缓存 3. netsh winsock r ...

  10. C. Tavas and Karafs 二分查找+贪心

    C. Tavas and Karafs #include <iostream> #include <cstdio> #include <cstring> #incl ...