开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何将"ng-click()“附加到动态添加的html数组上的<img>标记？

要将"ng-click()"附加到动态添加的HTML数组上的<img>标记，可以按照以下步骤进行操作：

首先，确保你已经在应用程序中引入了AngularJS框架。
在控制器中创建一个数组，用于存储动态添加的HTML代码。
在控制器中，使用$scope对象创建一个函数，该函数将在点击事件发生时被调用。例如，可以命名为"handleClick"。
在该函数中，编写你想要执行的逻辑。
在动态添加的HTML代码中，使用ng-click指令将"handleClick"函数与<img>标记关联起来。例如，可以这样写：ng-click="handleClick()"
在控制器中，使用$scope对象将动态添加的HTML代码添加到数组中。
在HTML模板中，使用ng-repeat指令遍历数组，并将数组中的每个元素渲染为HTML代码。

下面是一个示例代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
  <div ng-repeat="htmlCode in dynamicHtmlArray" ng-bind-html="htmlCode"></div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $sce) {
      $scope.dynamicHtmlArray = [];

      $scope.handleClick = function() {
        // 在这里编写点击事件的逻辑
        console.log('点击事件已触发');
      };

      // 动态添加HTML代码
      var htmlCode = '<img src="image.jpg" ng-click="handleClick()">';
      $scope.dynamicHtmlArray.push($sce.trustAsHtml(htmlCode));
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了AngularJS的ng-bind-html指令来渲染动态添加的HTML代码，并使用ng-click指令将"handleClick"函数与<img>标记关联起来。注意，为了使动态添加的HTML代码生效，我们使用了$sce服务的trustAsHtml方法来信任HTML代码。

这是一个基本的示例，你可以根据自己的需求进行修改和扩展。

相关搜索:使用img标记将预加载的图像添加到HTML中会导致图像重新下载动态地将缺少的标记添加到断开的HTML字符串如何将<form >标记动态添加到也是动态创建的ul的li项中如何将img添加到已设置样式的html代码块中如何将JavaScript添加到标记的超文本标记语言文本中？如何将ruby中的span类添加到HTML标记如何将SVG文件添加到动态尺寸的HTML画布元素中？如何将web上的图像添加到我的html站点？如何将元素添加到数组的末尾？如何将对象添加到数组的末尾？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

本文将侧重把所有页面的UI都实现出来，先把前端的工作都完成了，然后再去链接后端的 RESTful Service。登陆页面给页面添加 login.html 添加页面Html代码。 ...，需要给AngularJS加入两个自定义的标签: on-valid-submit, validated 由于这是一个全局的验证功能就把它添加到app.js ddApp module下，如果只针对某个页面...，可以只添加到这个页面的 controller 下。...详细页面添加详细页面 html 代码: <img class="order-img" ng-src="{{order.qrSrc}}" ng-click="goDetail

1K6 0

前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

将此过滤器添加到 ng-bind-html 、data-ng-bind-html? 所绑定的数据中，便实现了在数据加载时对于 html 标签的自动转义。示例代码： <!...如果属性在当前域上不存在，它会立即创建并添加到当前域示例： <!...ngClass指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。 ...是下标 } 结果： 4.3、添加元素将一个或多个新元素添加到数组未尾，并返回数组新长度 arrayObj. push([item1 [item2 [. . ....[itemN ]]]]); 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

15.3K10 0

前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

将此过滤器添加到 ng-bind-html 、data-ng-bind-html? 所绑定的数据中，便实现了在数据加载时对于 html 标签的自动转义。示例代码： <!...如果属性在当前域上不存在，它会立即创建并添加到当前域示例： <!...ngClass指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。 ...4.3、添加元素将一个或多个新元素添加到数组未尾，并返回数组新长度 arrayObj. push([item1 [item2 [. . ....[itemN ]]]]); 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

12.6K3 0

第215天：Angular---指令

，完成不同操作注意：HTML5 允许扩展的（自制的）属性，以 data- 开头。...1、ng-app 指令 ng-app指令用来标明一个AngularJS应用程序标记在一个AngularJS的作用范围的根对象上系统执行时会自动的执行根对象范围内的其他指令可以在同一个页面创建多个ng-app... 3、ng-repeat指令 ng-repeat指令用来编译一个数组重复创建当前元素，如 1 4、ng-class 指令 ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名 1 2 3 4 5 <!

3.2K3 0

angularjs中常用的ng指令介绍【转载】

ng提供的或者自定义的标签和属性，用来增强HTML表现力。标记(markup)。即双大括号{{}}，可将数据单向绑定到HTML中。过滤器(filter)。用来格式化输出数据。表单控制。...在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了。...ng-class ng-class用来给元素绑定类名，其表达式的返回值可以是以下三种： 1) 类名字符串，可以用空格分割多个类名，如’redtext boldtext’； 2) 类名数组，数组中的每一项都会层叠起来生效...； 3) 一个名值对应的map，其键值为类名，值为boolean类型，当值为true时，该类会被加在元素上。...因为我编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，就可以放心使用{{}}了。

1.9K3 0

Angularjs基础(十)

如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。　　　　　　　　　　　　...如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。　　　　　　　　　　　　...元素动态的绑定一个或多个CSS 类，但只能为偶数行。　　　　　　　　　　...元素动态的绑定一个或多个CSS 类，但只能为奇数行。　　　　　　　　...+ 1" ng-init="count=0">OK 　　　　　　定义和用法　　　　　　　　　　ng-click 指令告诉了AngularJS HTML 元素被点击后需要执行的操作

3.3K5 0

从零开始使用 Astro 的实用指南

最后，我将把我们的logo和一些语义标记，与一个容器一起添加到我们的header中，这样我稍后可以添加一些样式： <a class...你可以把你的布局文件放在你项目的任何地方，但把它们添加到src/layouts目录中是很好的做法。在我们的项目中，有一些跨页面的共享标记可以作为模板使用，以避免在不同的文件中重复它们。...，我可以用它来生成动态HTML，在我的主页上显示案例研究卡片。...现在你可以以任何方式将这些属性添加到你的模板中。另外，注意插槽元素。这是内容出现在最终HTML页面上的地方。还有一步。...我没有太多的时间，只想使用别人的作品，以便能够尽快创建我的页面。我搜索了一下FAQ的React组件，出现了一些链接。那么问题来了，如何将React组件添加到你的项目中。

8004 0

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板，我们可以把model和controller中的数据组装起来呈现给浏览器，还可以通过数据绑定，实时更新视图，让我们的页面变成动态的。ng的模板真是让我爱不释手。...ng提供的或者自定义的标签和属性，用来增强HTML表现力。标记(markup)。即双大括号{{}}，可将数据单向绑定到HTML中。过滤器(filter)。用来格式化输出数据。表单控制。...在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了。...，数组中的每一项都会层叠起来生效；　　3) 一个名值对应的map，其键值为类名，值为boolean类型，当值为true时，该类会被加在元素上。　　...因为我编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，就可以放心使用{{}}了。

2.9K2 0

AngularJS基础入门初探

，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。...npm install angular）　　方式二：下载angular.js包（https://github.com/angular/angular.js/releases）　　方式三：使用CDN上的...（2）文本输入指令绑定到一个叫name的模型变量。　　（3）双大括号标记将name模型变量添加到问候语文本。　　...（3）ng-app指令的作用在于声明当前DOM被AngularJS这个库中定义的一个模块所托管，而ng-model指令则用于绑定模型变量，ng-click绑定控制器中声明的事件。...三、开发一个任务清单程序 3.1 需求说明　　假设我们要做一个任务清单程序，它可以记录我们要做的所有任务信息，并且我们可以随时标记任务为已完成，而且随时增加新的任务到任务列表中。

1.8K3 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

现在，假设你将ng-click指令关联到了一个button上，并传入了一个function名到ng-click上。...结构创建好，然后整体添加到主文档中，这个DOM树的变更就会一次完成，性能会提高很多。...ng-click中写的表达式，能使用JS原生对象上的方法，比如Math.max之类的吗？为什么？不可以。...$new()创建继承的作用域 var $dom = compileFn($scope); // 添加到文档中 ...，返回编译好的jqLite对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）。

7.8K4 0

day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加修改删除品牌的实现 + 品牌分页条件查询的实现_用心笔记

框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。 ?...2）rows：每页要显示的记录数。注意：此处的rows与上处的rows的含义区别。 3.3.1 HTML 在brand.html引入分页组件 <!...，当我们点击复选框后判断是选择还是取消选择，如果是选择就加到数组中，如果是取消选择就从数组中移除。...这里我们补充一下JS的关于数组操作的知识（1）数组的push方法：向数组中添加元素（2）数组的splice方法：从数组的指定位置移除指定个数的元素，参数1为移除元素的开始位置，参数2为移除的个数...id); // 才向数组中添加 }else{ var index = $scope.selectIds.indexOf(id); // 查找数组中元素的指定位置，

9K6 4

AngularJS API之$injector ---- 依赖注入

scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入...这种注入方式，需要设置一个依赖数组，数组内是依赖的服务名字，在函数参数中，可以随意设置参数名称，但是必须保证顺序的一致性。...这个数组的最后一个参数是真正的方法体，其他的都是依赖的目标，但是要保证与方法体的参数顺序一致（与标记注入一样）。...$injector.annotate('xxx')获得xxx的所有依赖项 $injector.annotate(xxx) 样例代码 <script src="http://apps.bdimg.com/libs/angular.js

93010 0

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。...提前定义好类选择器的样式，通过元素属性的className属性来设置class的属性值，应用较多； 5、动态表格案例实战 1）添加表格的实现思路： * 1、给添加按钮绑定单击事件 * 2、获取文本框内容...* 3、创建td，设置td的文本为文本框的内容 * 4、创建tr，将td添加到tr中 * 5、获取table，将tr添加到table中 2）删除表格的实现思路： * 1、确定点击的是哪一个超链接...* 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td，设置td的文本为文本框的内容 * 4、创建tr，将td添加到tr...中 * 5、获取table，将tr添加到table中 * 删除： * 1、确定点击的是哪一个超链接 * 2、再删除 * *

2.2K4 0

Ionic如何实现单选二级菜单切换

这个功能有两个难点：其一是ionic的模态框modal框貌似不能动态传参　　　　其二是菜单切换需要单选，因为需要各一个right(打勾)标示当前项　　对于第一个问题，我的解决方法是主页面初始化时将弹窗内的数据一次性获取放在...--默认课程体系切换--> 课程体系　　以上html...1 /** 2 * 课程体系弹出框 3 */ 4 $ionicModal.fromTemplateUrl('list/level.html', { 5

1.7K9 0

用WijmoJS搭建您的前端Web应用 —— React

你可以在React里传递多种类型的参数，如声明代码。React可以帮助你渲染出UI和静态的HTML DOM元素。当然，你也可以传递动态变量、甚至是可交互的应用组件。...WijmoJS VS React 1.png 本文，我们将向你展示如何将WijmoJS添加到用React编写的简单应用程序中。...l 导入您要使用的组件并添加适当的标记。...：将“数据”成员添加到App组件中。...第4步，将React控件添加到应用程序将表格和图表添加到应用程序，请编辑“src / App.js”文件，如下所示。

1.9K3 0

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

这里演示了作用域中的绑定到html input 组件上的属性会自动更新。渲染{{greeting}}的逻辑包括：获取与模板上{{greeting}}相关的作用域。...当一个新的作用域创建后，它将添加到它的父作用域下成为一个子作用域。...注意Angular自动放置ng-scope class到作用域相关联的HTML元素上。...通常ng-app在html元素上，但是它也可以放到其他的元素上，比如页面上只有一部分是用angular来控制的这种情况。...$watchCollection(watchExpression,listener))检测一个数组或一个对象内的变化：当项目被添加，删除，或者重新排序时会被监测到。

13.2K2 0

Angularjs基础(八)

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的元素中添加如下代码: 　　　　元素定义一个控制器　　　　　　　　　　　　循环users 对象数组，每个user 对象放在元素中　　　　　　<button ng-click...scope.passw1 　　　　模型变量(用户密码1) 　　　　　　$scope.passw2 　　　　模型变量(用户密码2) 　　　　　　$scope.users 　　　　　模型变量(用户的数组...动画是通过改变HTML元素产生的动态变化效果。　　　　...当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。　　　　此外，在动画完成后，HTML 元素的类集合将被移除。

2.9K6 0

【一起来烧脑】一步学会AngularJS系统

{{ x }} ng-repeat指令用在一个对象数组上： <div ng-app="" ng-init="...根元素 ng-init 指令为 AngularJS 应用程序定义了初始值 ng-model 指令绑定 <em>HTML</em> 元素到应用程序数据 ng-repeat 指令对于集合中（<em>数组</em>中）<em>的</em>每个项会克隆一次...<em>HTML</em> 元素创建自定义<em>的</em>指令可以使用.directive函数来<em>添加</em>自定义<em>的</em>指令作用域作用域（scope）是应用在<em>HTML</em>和JavaScript之间<em>的</em>纽带 <div ng-app="myApp"...firstName + " " + lastName}} 过滤器过滤器可以使用一个管道字符（|）添加到表达式和指令中...元素 ng-hide 指令 ng-hide 指令用于隐藏或显示 HTML 元素 HTML事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件 <div ng-app

5.5K2 0

angularjs购物车功能（全）包含（修改，添加等功能）

先上效果图： css代码较为简单这里的css主要是为了修改模拟窗口，和添加数据模拟窗口： .shop{ width: 500px; height: 300px; background...margin: 0 auto; margin-top: 20px; } .shop p input{ width: 300px; height: 30px; } html...> 价格倒序批量删除 <button ng-click...//点击确认添加按钮 $scope.trueAdd=function(){ //获取输入框中的内容 var shop=...=function(){ //将修改后的值赋给数组 $scope.goods[idx].name=$scope.prod.name

1061 0

JavaScript做简单的购物车效果（增、删、改、查、克隆）

比如有时候遇到下面这种情况，点击加入购物车，然后在上方的购物车中动态的添加商品以及商品的信息，我们就可以通过JavaScript实现简单的这些操作。...首先我们需要在html文档中，通过css对页面的布局做一些简单的设置。并创建两个模板，其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。...在html和css都已经设置好了之后，我们就开始写js代码，实现动态的添加和删除。首先我们先获取所有商品的信息，这个一般情况是从后台数据库那里得到，今天这个是一个简单的例子，我们就直接定义几个商品。...{ img: "img/img5.jpg", desc: "vivo Y69全网通", price: 1199 } ]; 这是定义的这个商品是一个数组，所以我们可以用数组的forEach...}); 经过上面的代码之后，我们已经在网页中动态的添加了一些元素数据。接下来就是实现添加购物车以及删除的功能。

1.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭