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. Myeclipse的快捷键大全

    选择你要注释的那一行或多行代码,按Ctrl+/即可,取消注释也是选中之后按Ctrl+/即可. 如果你想使用的快捷键的注释是的话,那么你的快捷键是ctrl+shift+/ 我以前都是手动注释的,直接打/ ...

  2. 深入理解Oracle索引(25)：一招鲜、吃遍天之单字段索引创建思路

    本文较短.不过实用性很好.还是记录之.          ㈠ 先别看SQL语句.看执行计划.挑出走全表扫的表 ㈡ 回头看SQL语句.分析上述表的约束字段有哪些.检查各个约束字段的索引是否存在 ㈢ 选择 ...

  3. 我的javascript学习之路（一）对象之基础

    做了2个多月的ajax项目,对js的学习觉得了深入了不少,把自己的一些学习的经验贴出来,希望对初学者有所帮助,也希望大家能指出我的错误之处或者不当之处. javascript 是基于对象的语言,为什么 ...

  4. linux scp 服务器远程拷贝

    一.将本机文件复制到远程服务器上 #scp /home/administrator/news.txt root@192.168.1.1:/etc/squid /home/administrator/  ...

  5. Codeforces Educational Codeforces Round 5 B. Dinner with Emma 暴力

    B. Dinner with Emma 题目连接: http://www.codeforces.com/contest/616/problem/A Description Jack decides t ...

  6. hdu 4739 Zhuge Liang's Mines 随机化

    Zhuge Liang's Mines Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.p ...

  7. CircleWaveProgressBar

    https://github.com/eltld/CircleWaveProgressBar

  8. [转]SQL快速入门

    原文出处:http://blog.csdn.net/xxd851116/article/details/5688263 一.基础 1.说明:创建数据库CREATE DATABASE database- ...

  9. 使用getUserMedia 调用摄像头

    html5中一个有趣的 API,能够调用电脑的摄像头,结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了. 这里需要注意: 因为安全问题, chrome 对于本地文件禁用 ...

  10. LeetCode1 Two Sum

    题目 :Given an array of integers, return indices of the two numbers such that they add up to a specifi ...