CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Steven Serrano
Steven Serrano

Reputation: 303

change img class with text input with Angular

New to angular, I'm trying to grey out images ONE AT A TIME based on input from a text box. If I type in "four", my visa image gets greyed out. If I type "five", the mastercard image gets greyed out, etc. I cant figure out how to do them individually, all get greyed out at the same time. This is a simple example but I'm not sure if this is possible with one input? Here's my example:

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 */
}

UPDATED HTML for answer:

<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>

UPDATED CSS for answer:

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

Upvotes: 1

Views: 926

Answers (3)

iosonosempreio
iosonosempreio

Reputation: 93

Yes, I would use ng-class too like this: https://www.w3schools.com/code/tryit.asp?filename=FGTCI55X6CEM

<!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>

Upvotes: 0

inoabrian
inoabrian

Reputation: 3800

The correct way would be to match against the string that you expect it to be.

Visa === 'four' Mastercard == 'five' Amex == 'three'

<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>

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

you can use ng-class to css classes dynamically 

<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>

Upvotes: 2

Related Questions