首页 \ 问答 \ 更改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

相关问答

更多

我可以只使用一个位图绘制alpha吗?(Can I draw alpha using just one bitmap?)

实际上,您可以将Alpha级别设置为Paint对象。 例如: Paint transparentpaint = new Paint(); transparentpaint.setAlpha(100); // 0 - 255 canvas.drawBitmap(bitmap, 0, 0, transparentpaint); 尝试粘贴此而不是canvas.drawBitmap(bitmap, 0, 0, null); I played with this for some time and I

自己附加两个ng-repeat(attach two ng-repeat themselves)

有两种方法可以做到这一点。 首先是服务器端:有一个请求返回正确的数据集。 我将专注于客户端,因为它是客户端问题。 我建议你创建一个包含用户和值的列表: var tabuser = JSON.parse(localStorage.getItem("myid")); console.log(tabuser); var urls = []; $scope.data = []; for(i = 0; i < tabuser.length; i++){

初学者Android:开发者页面上的片段示例中的R文件会生成意外结果(Beginner Android: R file in Fragment example on Developer page generates unexpected results)

在Android项目中,每次构建项目时,R类都会自动更新或生成。 默认情况下,当您保存更改或按ctrl + s时,eclipse会自动构建或编译代码。 因此,您的资源R的任何更改都会更新。 当你指定新的id,布局,drawable,菜单,字符串,样式等时,android会在你的R类中添加一个引用静态整数。 例: public static final class id { public static final int image=0x7f070001; public stati

Rails 3 undefined方法nil:NilClass has_many:在尝试创建时通过(Rails 3 undefined method nil:NilClass has_many :through when attempting create)

不完全是我想要的,但使这个解决方案。 使用以下内容能够相应地保存。 仍然无法找出为什么我无法从URL中拉出患者 - 例如app.dev/patients/2 - 其中患者信息正在拉id 2 ...但现在我能够使用什么来保存约会我怀疑是一种相当粗糙的方法。 在表单中,我添加了一个隐藏字段,用于提取相应的patient_id 在Appointments控制器中,添加到attr_accessible:patient_id 在appointmentments_controller中 def create

检查IP地址的前X位数(Check first X digits of IP address)

你有没有尝试过: bool IsCorrectIP = ( ipstring.StartsWith("10.80.") ); 对不起,如果答案太简洁了。 但那应该可以解决手头的问题。 Have you tried: bool IsCorrectIP = ( ipstring.StartsWith("10.80.") ); Sorry if the answer is too terse. But that should resolve the issue at hand.

如何通过表单输入添加新表和列(How to add new table and column by form input)

尝试这个 <?php // Create connection mysql_connect("localhost","root","","test") OR die("Server Connection error"); mysql_select_db("test") OR die("DB error"); $category = "category"; // sql to create table $sql = "CREATE TA

多组合逻辑应使用开关或IF(Multiple combinations logic should use switch or IF)

有点像这样 $total = 0; if( preg_match('/([^*\s]+)/', $str, $match ) ){ $total = count( $matches[1]); } echo $total; 如果您需要知道它们匹配的位置,请改用它 $str = '* 0 * * *'; if( preg_match_all('/([^*\s]+)|\s/', $str, $match ) ){ print_r( $

Junit等待并处理异常后断言(Junit assert something after awaiting and handling an exception)

这里的关键是如果你想在异常后恢复执行, 那么try块是至关重要的。 您可以将其分解为方法或库,但必须在测试方法中调用它。 有效的事情: 你和nrainier引用的那种经过验证的fail()成语,我更喜欢: try { foo(); fail("foo did not throw an exception"); } catch (Exception ex) { } catch-exception是一个库,像Mockito一样,包装传递的对象并在每个方法周围放置一个try块。 Mocki

相关文章

更多

最新问答

更多
  • 图像TapGestureRecognizer未触发(Image TapGestureRecognizer not firing)
  • 从数组中选择项目(Selecting items from an array)
  • PhpStorm:简单的PHP表单不发布(PhpStorm: Simple PHP form not posting)
  • 如果语句只有Javascript中的数字(If statement with only a number in Javascript)
  • 截图Android中的黑色(Screenshot Black in Android)
  • 默认值如何在数据库中内部工作?(How does default value internally work in Database?)
  • 左连接不加入单个记录(Left Join Not Joining with a Single Record)
  • 在#sign drupal之后获取url参数(get url parameter after # sign drupal)
  • Crontab CD到目录(Crontab CD to Directory)
  • #inf c ++ visual studio(#inf c++ visual studio)
  • 使用Python将指数修改的高斯曲线拟合到数据(Fitting an exponential modified gaussian curve to data with Python)
  • Javascript - 具有音高和持续时间控制的文本到语音(Javascript - text to speech with pitch and duration control)
  • 群组和用户有多少通过?(Groups and Users has many oder has many through?)
  • 如何在简单的二叉树中选择节点所在的哪一侧?(How to pick which side a node is on in a simple binary tree?)
  • 在ImageView上添加TextView(Android)(Add TextView over ImageView (Android))
  • 使用工厂方法创建泛型(Using Factory Method to Create Generics)
  • cordova 4.1.2中的平台特定代码(platform specific code in cordova 4.1.2)
  • 使用php格式化日期[复制](Format date using php [duplicate])
  • 在Python中解析年,月,日,小时,分钟,秒(Parsing year, month, day, hour, minute, second in Python)
  • 用jquery替换图像和类(Replacing image and class with jquery)
  • 导入的module.submodule命名空间干扰彼此(imported module.submodule namespaces interfering with eachother)
  • 播放框架:提交按钮似乎不起作用(Play framework: Submit button doesn't seem to work)
  • 段落包括通过过渡带来的div(Paragraph covers div brought through transition)
  • 使用processing.Manager时对象是否重复?(Object duplicated when using processing.Manager?)
  • lxde意外退出(lxde quits unexpectedly)
  • 真正的Maven依赖是什么?(What really are Maven dependencies?)
  • 如何在我的代码中修复getJSON方法错误?(how to fix getJSON method error in my code?)
  • Google Analytics状态:已安装跟踪 - 但无法正常运行(Google Analytics Status: Tracking Installed - but isnt working)
  • 在模型文件中的非对象上调用成员函数num_rows()(Call to a member function num_rows() on a non-object in model file)
  • 有关UNIX中fork()函数的问题(Questions about the fork() function in UNIX)