AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10
学习 操作 10 --- angularjs Event NG 事件处理
2023-09-14 08:58:56 时间
本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解.
1.切换目录
git checkout step-10 npm start
2.效果
点击右边的小图片,那么左边框中将显示大图片,示例如下:
3.代码实现
查看step-9和step-10之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-9...step-10
Controllers(控制器)
app/js/controllers.js
:
'use strict'; /* Controllers */ var phonecatControllers = angular.module('phonecatControllers', []); phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; }]); phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { $scope.phone = data; $scope.mainImageUrl = data.images[0]; }); $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; } }]);
注:控制器这里定义了一个setImage方法,就是将mainImageUrl的值设置为当前imageUrl.
CSS(样式)
app/css/app.css
ul.phone-thumbs img:hover {
cursor: pointer;
}
改变鼠标移动上去的样式为指针形.
Template(模板)
app/partials/phone-detail.html
<img ng-src="{{mainImageUrl}}" class="phone"> ... <ul class="phone-thumbs"> <li ng-repeat="img in phone.images"> <img ng-src="{{img}}" ng-click="setImage(img)"> </li> </ul> ...
这里定义了一个ng-click方法,这里将当前的img作为参数传过去,然后,setImage方法将mainImageUrl的值替换为当前点击的图片,从而实现点击小图片,左边的图片被放大.
4.测试:
test/e2e/scenarios.js
...
describe('Phone detail view', function() {
...
it('should display the first phone image as the main phone image', function() {
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
});
it('should swap main image if a thumbnail image is clicked on', function() {
element(by.css('.phone-thumbs li:nth-child(3) img')).click();
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
element(by.css('.phone-thumbs li:nth-child(1) img')).click();
expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
});
});
执行如下命令进行测试:
npm run protractor #测试结果如下: ------------------------------------ PID: 4250 (capability: chrome #1) ------------------------------------ Using ChromeDriver directly... ....... Finished in 9.867 seconds 7 tests, 11 assertions, 0 failures
5.实验:
在Controllers中的PhoneDetailCtrl加入:
$scope.hello = function(name) { alert('Hello ' + (name || 'world') + '!'); }
同时在phone-detail.html中加入:
<h1>{{phone.name}}</h1> <button id="{{phone.name}}" ng-click="hello(phone.name)">Hello</button> <p>{{phone.description}}</p> ...
效果如下图所示:
这样就完成了一个ng-click的操作.
事件处理方法,除了ng-click还有其它如:
....
可以根据个人需要进行选择,和JS本身自带的方法差不多,这里只不过angularjs又多封装了一层.
相关文章
- 快速入门Python机器学习(22)
- Spring MVC 框架学习(四)----连接程序
- Linux学习手册大全
- 23个机器学习最佳入门项目(附源代码)
- python学习:文件操作及os方法大全
- STM32CubeMX学习笔记(26)——SDIO接口使用(读写SD卡)
- 人工智能300年!LSTM之父最新长文:详解现代AI和深度学习发展史(附下载)
- Redis学习之(一)详解大数据
- redis学习 (key)键,Python操作redis 键 (二)详解大数据
- hbase-1.2.1之put操作源码学习详解编程语言
- 学习 Linux C 程序:行读取文件(linuxc行读文件)
- MySQL操作: 学习基础SQL语句(mysql的操作语句)
- 从零开始学习Linux FTP编程(linuxftp编程)
- MySQL入门教程:让你快速掌握基础知识(mysql入门学习)
- MySQL知识:将数据库学习变得简单(mysql知识)
- 微软众包引领新智能平台,为机器学习提供新工具
- 学习MySQL正则表达式提升操作效率(mysql使用正则表达式)
- 「MySQL入门指南」 从零基础开始学习MySQL的必备书籍!(学习mysql的书)
- 学习MongoDB操作API 简易入门指南(mongodb操作api)
- 学习Oracle C语言:一种崭新的操作体验(oraclec语言操作)
- 学习成为Linux运维工程师的秘籍(linux运维工程师教程)
- SQLServer掌握必备技能:学习OR条件查询操作(sqlserveror)
- MySQL循环学习与实践(mysql中中循环)
- 使用Redis的正确方法一步步学习操作(怎么操作redis)
- MySQL一键安装视频,轻松学习安装方法(mysql一键安装视频)
- 学习MYSQL必备下载视频配音,轻松掌握数据库知识(MYSQL下载视频配音)
- MongoDB学习笔记(三)在MVC模式下通过Jqgrid表格操作MongoDB数据
- jQuery学习笔记之Ajax操作篇(二)-数据传递