javascript - Change ng-src value onclick - Stack Overflow

admin管理员组

文章数量:1393092

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?

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?

• javascript
• html
• angularjs

Share Improve this question Follow asked Sep 13, 2016 at 14:26 user6767148user6767148 8911 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Very very wrong code, You bine standard DOM modification with angular. Choose only one solution not bine in this way. Check my example code:

var app=angular.module("image",[]);

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


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

So only set src scope variable to different src and it works like a charm.

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

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.

Set ng-click to function in your controller, that changes "src" variable in your scope.

本文标签： javascriptChange ngsrc value onclickStack Overflow