首页 \ 问答 \ 更改ng-src值onclick(Change ng-src value onclick)

更改ng-src值onclick(Change ng-src value onclick)

我有一个AngularJS页面,我希望它在单击另一个元素时更改元素的ng-src值。 我初始化变量src:

data-ng-init="src='assets/img/projects/1'

然后我做了这个元素:

<img data-ng-src="{{src}}/1.jpg" id="img1">

最后我希望当有人点击我的链接时,它{{src}}/1a.jpg更改为{{src}}/1a.jpg ,所以我尝试了这个:

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html');document.getElementById('img1').setAttribute('data-ng-src', '{{src}}/1a.jpg');"></a>

(不要关心我的空链接,我知道如何点击它...),我的问题是,src的值没有改变,我的页面仍然是第一个图像,我怎样才能改进我的代码将值{{src}}/1.jpg更改为{{src}}/1a.jpg


I've an AngularJS page and I want it to change ng-src value of an element when clicking on another element. I intialized variable src:

data-ng-init="src='assets/img/projects/1'

Then I made this element:

<img data-ng-src="{{src}}/1.jpg" id="img1">

And finally I want when someone clicks on my link, It change that src to {{src}}/1a.jpg, So I tried this:

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html');document.getElementById('img1').setAttribute('data-ng-src', '{{src}}/1a.jpg');"></a>

(Don't care about my empty link, I know how to click on it...), My problem is, The value of src doesn't change and My page is still the first image, How can I improve my code to change value {{src}}/1.jpg to {{src}}/1a.jpg?


原文:https://stackoverflow.com/questions/39472484
更新时间:2019-07-13 09:05

最满意答案

创建新的varibale 图像

data-ng-init="src='assets/img/projects/1'; image='1.jpg'"

然后HTML元素

<img data-ng-src="{{src}}/{{image}}" id="img1">

如果有人点击你链接,则更改图像

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html'); image='1a.jpg'"></a>

希望这可以帮助 ! 谢谢。


Create new varibale image

data-ng-init="src='assets/img/projects/1'; image='1.jpg'"

Then HTML Element

<img data-ng-src="{{src}}/{{image}}" id="img1">

If someone clicks on you link the change the image value

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html'); image='1a.jpg'"></a>

Hope this helps ! Thanks.

2016-09-13

相关问答

更多

AngularJS ng-src和ng-attr-src在IMG标签中不起作用(AngularJS ng-src and ng-attr-src don't work in IMG tag)

首先,您应该使用ngRoute中的resolve方法来确保解析数据而不是使用$ timeout。 我认为这里发生的是因为currentUser.profileImage是一个字符串(它是javascript中的原语),所以没有双向绑定发生,因此即使你的函数正在解析,ui已经将它计算为未定义。 在ngRoute中使用resolve将确保在您需要的所有内容都得到解决之前不会加载您的页面。 .when("/user", { templateUrl: "users.html", contr ...

使用javascript更改onClick属性(Change onClick attribute with javascript)

你想这样做 - 设置一个函数,将被执行以响应onclick事件: document.getElementById('buttonLED'+id).onclick = function(){ writeLED(1,1); } ; 你正在做的事情不起作用,因为: onclick事件处理程序期望有一个函数,在这里您正在分配一个字符串 document.getElementById('buttonLED'+id).onclick = "writeLED(1,1)"; 在这里,你将onclick事件处理 ...

jquery click和js onclick

js脚本只执行一次而已,至于之后点击响应那是第一次执行的时候绑定在那个按钮事件上的脚本而已,你第一次就没绑定上,以后当然也不好使 如果想在上面写的话这样 $(function(){ $("#bt").click( function() { alert("haha"); }); }); 但是我还是建议你把代码写在下面,这样不会因为某些额外元素没有载入完成而影响了网页的逻辑 我刚看了楼上的回复,最好的解决方案我认为是放在下面,就算放在上面也不用写 $(document).ready(fn)那 ...

按钮onClick目标正在改变(Button onClick target is changing)

检查目标元素是否为I 如果是这样,如果不继续采取原来的目标,带走父母。 const changeViewType = selectedView => { target = selectedView.target.tagName == 'I'? selectedView.target.parentElement : selectedView.target; console.log(target.value) } Check if the target element is an I ...

在AmChart中为chartDiv的onclick事件获取正确的x轴值(Not getting correct x axis value on onclick event for chartDiv in AmChart)

以下是在轴上侦听clickItem事件的正确方法 chart.addListener("rendered", function(e) { e.chart.categoryAxis.addListener("clickItem",function(e) { console.log(e); }); }); http://docs.amcharts.com/3/javascriptcharts/ValueAxis#clickItem I have solved the ...

如何将选定的值从微调器传递给onclick(How to get/pass the selected value from spinner to onclick)

您可以将选定的值保存为全局字符串,然后将其传递给您的请求。 像这样的东西 String sel_spinner; @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { //Setting the values to textviews for a selected item tvID.setText(getNam ...

通过PHP运行“onclick”(Run “onclick” through PHP)

您无法从PHP运行JavaScript事件。 PHP是一种服务器端语言,而HTML和JavaScript是客户端语言。 从客户端HTML和JavaScript获取数据的唯一方法是使用以下方法之一: 使用带有操作的HTML表单将数据提交回服务器。 <form action="/submit.php"> <input name="purchaseEntry" value="39873" /> <input type="submit" value="Submit" /> </fo ...

onClick完全删除特定的DIV(onClick completely remove a specific DIV)

可以办到。 然而,你的脚本背后的逻辑是完全错误的。 让我解释: 如果有人试图删除必须克隆的主实例 ( #preacq ),会发生什么? 如果有人想要克隆连接“克隆”按钮的实例 (为什么要在每个实例中放置“克隆”按钮但复制主要内容 ),该怎么办? 为此目的处理id是过度的。 主实例包含具有自己的id属性的元素(例如: select id="glListName0" )。 因此,每次克隆主实例时,具有相同id的元素数量都会增加。 请记住,每个DOM元素的id 必须是唯一的 由于每个实例都有“clone ...

相关文章

更多

最新问答

更多
  • Unity着色器错误;(Unity shader error; presumably in if statement)
  • 如何在Liferay portlet中设置Cookie?(How to set a Cookie in Liferay portlet?)
  • C#只读访问List <>或其他集合,或ToArray()魔术(C# readonly access to List<> or other collection, or ToArray() magic)
  • 如何使用Google Web工具包创建登录应用程序?(How to create a login application using Google web tool kit? [closed])
  • 如何使我的函数返回结果作为全局变量?(How to make my function return results as a global variable?)
  • 为什么我的网站需要“启用32位应用程序”?(Why does my website need “Enable 32-bit applications”?)
  • 红宝石数组具有相同的值(ruby array of hash with same value)
  • Android(在Scala中):StackOverflowError取决于何时启动线程?(Android (in Scala): StackOverflowError depends on when to start a thread?)
  • 适用于iOS应用的通用链接(Universal Links for iOS apps)
  • 创建并打开文件linux编程(create and open file linux programming)
  • Datepicker,第2个日期是从第1个日期开始的X天(Datepicker, 2nd date is X days from 1st date)
  • 背景大小过渡不起作用(Transition on background-size doesn't work)
  • 在React / Redux中的On Click函数中传递Prop(Passing a Prop in an On Click Function in React/Redux)
  • 关键字在代码中做了什么,是否有没有此关键字的替代方法?(what does the keyword this does in the code and are there any alternate methods without this keyword? [duplicate])
  • 反向设计FoxPro / dBsae数据库以创建EER模型(Reverse Engineer a FoxPro/dBsae database to create the EER model)
  • 在R中的变量中组合具有相同值的行(Combine rows that have same value in a variable in R [duplicate])
  • SQL Server:非空唯一主键(SQL Server: Non-null unique vs. Primary Key)
  • 将扩展ASCII字符代码转换为ISO-8859-1(Convert extended ASCII character codes to ISO-8859-1)
  • 如何在.NET中读取m4a文件中的标签?(How to read tags out of m4a files in .NET?)
  • 呼叫链接的性能提升?(Performance gain on call chaining?)
  • 风景名胜区规划设计文本里面都包含哪些内容?推荐一家旅游规划设计公司?谢谢!
  • 如何在String中将字符串转换为枚举?(How do I convert a string to enum in TypeScript?)
  • SQLite SELECT出现异常如何解决它?(SQLite SELECT gives exception How to fix it?)
  • NSLog不会从ViewController类输出,而是来自AppDelegate类的WILL。(NSLog will NOT output from the ViewController class, but WILL from the AppDelegate class. iOS:Objective C)
  • 更改UIPicker突出显示的标签宽度(change UIPicker highlighted tab width)
  • 空心倒五角形(Hollow inverted pentagon)
  • 如何设置仅使用OpenID的Plone站点(How to setup Plone sites working only with OpenID)
  • Paperclip缺少Amazon S3的协议(https)(Paperclip is missing the Protocol (https) with Amazon S3)
  • 从宏中部署netbeans中的ANT文件(Deploy ANT file in netbeans from macro)
  • XMLReader是未知的(XMLReader is unknown)