Änderung Attribut src mit Winkel 2 OHNE JQUERY

Question

Ich habe diese Bilder:

<div class="image-index-container"> 
        <div> 
         <img class='index-pics' src="images/yourbag.png" alt=""> 
         <p class="activeIndex">Your Bag</p> 
        </div> 
        <hr> 
        <div style="width: 13%"> 
         <img class='index-pics' src="images/delivery-gray.png" alt=""> 
         <p>Delivery Details</p> 
        </div> 
</div> 

, wenn ich auf einen Knopf klicken Ich möchte aus images/yourbag zu images/yourbag-grau und das img das src-Attribut ändern, mit die src images/lieferung-grau zu bilder/lieferung.

zusätzlich die Klasse activeIndex aus dem ersten Text zu entfernen und es zum zweiten hinzufügen, ohne JQuery mit

Answer 1

Verwendung src="{{path}}" und Angular den Pfad aktualisieren. Zum Beispiel

<button (onclick)="path=newpath"><button> 

Ein weiteres Beispiel

<div class="col-lg-4"> 
<h3>Github Users:{{[].concat(users).length}} </h3> 
<ul> 
    <li *ngFor="let user of users" style="list-style:none"> 
    <button (click)="data = user" style="cursor:pointer"> <img src="{{user.avatar_url}}" style="height:200px; width:250px;" /></button> 
    </li> 
</ul> 
</div> 
<md-card class="col-lg-8 " *ngIf="data" style="position:fixed; margin-left:22%; margin-top:3.5%"> 
    <div class="col-lg-4"> 
    <img src="{{data.avatar_url}}" style="height:200px; width:250px;" /> 
    </div> 
    <div class="col-lg-8"> 
{{data | json}} 
</div> 
</md-card> 

Answer 2

tun es so mit diesem [src]="imageUrl"

import {Component} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
    <img class='index-pics' [src]="imgsrc" alt=""> 
    </div> 
    <button type="button" (click)="btnClick()">change</button> 
    `, 
    directives: [] 
}) 
export class App { 
    imgsrc="http://az866755.vo.msecnd.net/product/1468402190267-product.jpeg" 

    btnClick() 
    { 
    this.imgsrc="http://az866755.vo.msecnd.net/product/1454067764999-product.jpeg" 
    } 

    constructor() { } 
}