更改img類與文本輸入與角

新角，我試圖根據文本框的輸入一次灰化圖像。如果我輸入「四」，我的簽證圖像會變灰。如果我輸入「五」，萬事達卡圖像變灰，等我不知道如何單獨做，他們都在同一時間變灰。這是一個簡單的例子，但我不確定這是可能的一個輸入？這是我的例子：更改img類與文本輸入與角

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

來源

2017-06-21 Steven Serrano

這正在發生，因爲即使你輸入'四'，所有的卡都被添加'四'，四個的CSS類將不透明度應用於所有。 – inoabrian

@inoabrian是的，其實我意識到這一點，但我不知道如何使其行爲獨特。 –

結帳我的回答 – inoabrian

可以使用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>

來源

2017-06-21 17:31:42

謝謝！我已更新我的問題以顯示我所做的事。 –

正確的方法是要匹配的，你希望它是字符串。

簽證=== '四' 萬事達== '十二五' 美國運通== '三'

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

來源

2017-06-21 17:33:43 inoabrian

是的，我會用ng-class太像這樣：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>

來源

2017-06-21 17:40:21 iosonosempreio

更改img類與文本輸入與角

回答

相關問題