javascript - 单击时更改 ng-src 值

标签 javascript html angularjs

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

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

然后我制作了这个元素:

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

最后我希望当有人点击我的链接时,它会将 src 更改为 {{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

最佳答案

非常非常错误的代码,你将标准 DOM 修改与 Angular 结合起来。仅选择一种解决方案,不要以这种方式组合。检查我的示例代码:

var app=angular.module("image",[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="image" ng-init="src='https://www.gravatar.com/avatar/161dac2e231b0f6b4340000328e18bcf?s=328&d=identicon&r=PG&f=1'">
<img data-ng-src="{{src}}" id="img1">


<button ng-click="src='https://www.gravatar.com/avatar/a5af44879d481c3c15a4b2dd55007322?s=328&d=identicon&r=PG'" >Change image src to different</button>
</div>

因此,只需将 src 作用域变量设置为不同的 src,它就可以发挥作用。

ng-click="src='different src'"

关于javascript - 单击时更改 ng-src 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39472484/

相关文章:

javascript - html span 类导致链接错误地居中

javascript - 在 AngularJS 中使用 Jasmine 测试元素数量

javascript - AngularJS 无法插入错误

javascript - 在 JavaScript 中使用 HTML 变量

javascript - 用符号命名的方法不返回可迭代

html - 输入类型编号在 Window Surface 平板电脑上不起作用

javascript - Angular.js 中的嵌套 View 模板?

javascript - AJAX 请求后重新加载 javascript 文件

javascript - 对象不支持此属性或方法 IE8

html - 如何使用 CSS 设置添加到购物车 <button> 的样式?