2016-09-13 9 views
0

私はAngularJSページを持っていて、別の要素をクリックしたときに要素のng-src値を変更したい。私は、変数SRCをintialized:ng-srcの値をonclickに変更する

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

は、その後、私は、この要素製:

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

をそして最後に、私は誰かが私のリンクをクリックしたとき、それは{{src}}/1a.jpgにそのSRCを変更したい、だから私はこれを試してみました:

(私の空のリンクを気にしないで、私はそれをクリックする方法を知っています...)、私の問題は、srcの値は変更されず、私のページは依然として最初のイメージです。コードを改善して値を{{src}}/1.jpgから{{src}}/1a.jpgに変更しますか?

答えて

2

誰かがクリックした場合、あなたが変更に画像

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html'); image='1a.jpg'"></a> 
をリンク新しいvaribale イメージ

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

次にHTML要素

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

を作成します。

これは役に立ちます。ありがとう。

+0

優れています!それは良いアイデアです! – user6767148

+0

うわー!ありがとう – KrishCdbry

1

あなたのコントローラでng-clickを設定すると、スコープ内の "src"変数が変更されます。

+0

src変数はスコープではありません - ng-initを使って初期化しました。問題ありませんか? – user6767148

+0

これをinitで初期化しても、依然として有効範囲内にあります。それにもかかわらず、コントローラの変数を初期化する方が良いでしょう。 ng-init = "src = 'assets/img/projects/1'"はコントローラの$ scope.src = 'assets/img/projects/1'と同じです –

4

非常に間違ったコードです。標準的なDOMの修正と角度を組み合わせています。このように結合しないソリューションは1つだけ選択してください。私の例のコードをチェックしてください:

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'" 
関連する問題