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. Hadoop on Mac with IntelliJ IDEA - 9 解决Type mismatch in value from map问题

    修改陆喜恒. Hadoop实战(第2版)5.3排序的代码时遇到IO异常. 环境:Mac OS X 10.9.5, IntelliJ IDEA 13.1.5, Hadoop 1.2.1 异常具体信息如下 ...

  2. HITAG 1/2/S

    HITAG S -- 3rd generation HITAG™ family Modulation Read/Write Device to Transponder: 100 % ASK and B ...

  3. linux的webserver配置与管理——创建用户个人主页

    本实验用的是RedHat linux9.0,在虚拟机上进行操作,它已具有相当完好的可视化界面,这样用户会更加easy接受和理解. 首先呢就是虚拟机的相关配置,这个就不说了,当我们安装完系统后,打开终端 ...

  4. SMARTFORM报表程序设计(2)

    在创建并设置好STYLE程序之后,在SMARTFORM页面选择单选框FORM输入报表程序名称(ZS_SFLIGHT),点击CREATE按钮即可进入SMARTFORM BUILDER图形设置界面,SMA ...

  5. Educational Codeforces Round 4 C. Replace To Make Regular Bracket Sequence 栈

    C. Replace To Make Regular Bracket Sequence 题目连接: http://www.codeforces.com/contest/612/problem/C De ...

  6. ueditor 编辑器再thinkphp中使用 解决转义问题

    在前台common.php文件中加入下面的函数就可以解决了 <?php //取消thinkphp里面的转义 if (get_magic_quotes_gpc()) { function stri ...

  7. zookeeper集群安装配置

    http://www.firefoxbug.net/?p=2565

  8. Android APK反编译得到Java源代码和资源文件

    在此郑重声明,贴出来的目的不是为了去破解人家的软件,完全是一种学习的态度,不过好像通过这种方式也可以去汉化一些外国软件. 一.反编译Apk得到Java源代码 首先要下载两个工具:dex2jar和JD- ...

  9. MySQL Spatial Extensions 地理信息

    http://dev.mysql.com/doc/refman/5.7/en/gis-data-formats.html http://mysqlserverteam.com/mysql-5-7-an ...

  10. MTD NANDFLASH驱动相关知识介绍

    转:http://blog.csdn.net/zhouzhuan2008/article/details/11053877 目录 MTD总概述 MTD数据结构 MTD相关层实现 MTD,Memory ...