Question

角色新手，我试图根据文本框的输入逐个灰显图像。如果我输入＆＃34;四＆＃34;，我的签证图像会变灰。如果我键入＆＃34;五＆＃34;，万事达卡图像会变灰，等等。我无法弄清楚如何单独执行它们，所有这些都会同时变灰。这是一个简单的例子，但我不确定这是否可以通过一个输入？这是我的榜样：

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>

Answer 2

正确的方法是匹配您期望的字符串。

签证===＆＃39;四＆＃39; 万事达卡==＆＃39;五＆＃39; 美国运通==＆＃39;三＆＃39;

<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 === 'three'}" />
  </div>
</div>

Answer 3

是的，我会像https://www.w3schools.com/code/tryit.asp?filename=FGTCI55X6CEM

那样使用ng-class

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>

.red {
color: red;
}

</style>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    Lower case number in words: <input type="text" ng-model="firstname">

    {{firstname}}

    <p ng-class="{'red': firstname != 'one'}">one</p>
    <p ng-class="{'red': firstname != 'two'}">two</p>
    <p ng-class="{'red': firstname != 'three'}">three</p>
    <p ng-class="{'red': firstname != 'four'}">four</p>
  </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "zero";
});
</script>

</body>
</html>

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

3 个答案: