Изменить значение ng-src onclick

Question

У меня есть страница AngularJS, и я хочу, чтобы она меняла значение ng-src элемента при нажатии на другой элемент. Я intialized переменная SRC:

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

Тогда я сделал этот элемент:

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

И, наконец, я хочу, когда кто-то нажимает на мою ссылку, это изменение, что SRC на {{src}}/1a.jpg, поэтому я попытался это:

(Не заботьтесь о моей пустой ссылке, я знаю, как нажать на нее ...), Моя проблема заключается в том, что значение src не изменяется, а моя страница по-прежнему является первым изображением. Я улучшаю свой код до значение изменения {{src}}/1.jpg - {{src}}/1a.jpg?

Answer 1

Создать новый 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> 

Надеюсь, это поможет! Благодарю.

Answer 2

Установите ng-click для работы в контроллере, который изменяет переменную «src» в вашей области действия.

Answer 3

Очень плохой код, вы комбинируете стандартную модификацию DOM с угловым. Выбирайте только одно решение, которое не объединяется таким образом. Проверьте мой пример кода:

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 области видимости переменных в другую ЦСИ и он работает как шарм.

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