javascript - 使用 Angular 更改带有文本输入的 img 类

Question

angular 的新手，我正在尝试根据文本框的输入一次将一张图像灰显。如果我输入“四”，我的签证图像就会变灰。如果我输入“五”，万事达卡图像会变灰，等等。我无法弄清楚如何单独执行它们，同时全部变灰。这是一个简单的示例，但我不确定一次输入是否可行？这是我的例子:

HTML

<div ng-app="" ng-init="prefixes={visa:'four',mastercard:'five',amex:'three'}">
  <div>     
    <input type="text" value="" ng-model="prefixes.cards" />
  </div>
  <div>
    <img id="visa" src="images/visa-card-logo.png" class="{{prefixes.cards}}" />
  </div>
  <div>
    <img id="mastercard" src="images/master-card-logo.png" class="{{prefixes.cards}}" />
  </div>
  <div>
    <img id="amex" src="images/amex-card-logo.png" class="{{prefixes.cards}}" />
  </div>
</div>

CSS

.four {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}
.five {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}
.three {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

更新的 HTML 答案:

<div ng-app="" ng-init="prefixes={visa: '4', mastercard:'5', amex:'3'}">
  <div>     
    <input type="text" value="" ng-model="prefixes.cards" />
  </div>
  <div>
    <img id="visa" src="images/visa-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '4'}" />
  </div>
  <div>
    <img id="mastercard" src="images/master-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '5'}"  />
  </div>
  <div>
    <img id="amex" src="images/amex-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '3'}"  />
  </div>
</div>

答案的更新 CSS:

.greyed {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

Answer 1

你可以使用ng-class来动态地CSS类

<div ng-app="" ng-init="prefixes={visa:'four',mastercard:'five',amex:'three'}">
  <div>     
    <input type="text" value="" ng-model="prefixes.cards" />
  </div>
  <div>
    <img id="visa" src="images/visa-card-logo.png" ng-class="{'four' : prefixes.cards === 'four'}" />
  </div>
  <div>
    <img id="mastercard" src="images/master-card-logo.png" ng-class="{'five' : prefixes.cards === 'five'}"  />
  </div>
  <div>
    <img id="amex" src="images/amex-card-logo.png" ng-class="{'amex' : prefixes.cards === 'amex'}" />
  </div>
</div>