是否有可能改變按鈕的顏色？

我希望當用戶將他的用戶名和密碼輸入到輸入中時，按鈕的顏色會發生變化，因此可以按下按鈕的標記。（灰色這樣的變化 - >綠）是否有可能改變按鈕的顏色？

CSS

.turn-green { 
    background-color: green; 
}

@IonicPage() 
@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
}) 
export class LoginPage { 
    userWroteName: false; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    function userTyped(value) { // fires on each keystroke 
    const minLengthForName = 3; // you choose your min accepted length 
    // some code you want here 
    if (value.length >= minLengthForName) { 
     this.userWroteName = true; 
    } else { 
     this.userWroteName = false; 
    } 
} 


    } 



    ionViewDidLoad() { 
    console.log('ionViewDidLoad LoginPage'); 
    } 


}

來源

2017-10-08 Colin M.

請看看[我如何問一個好問題？]（https://stackoverflow.com/help/how-to-ask）。 _按鈕？ - _which_按鈕？將代碼添加到您的問題。你試過什麼了？是angularjs（v1）還是使用typescript和Angular2 +的ionic2，你的標籤沒有意義。 – David

這個問題很明顯。他需要使用ngClass在某些條件下更改按鈕的顏色。人們可以花幾個小時尋找如何做這種簡單的事情，並且像「你做得不夠」這樣的評論沒有幫助。我們都去過那裏。這不像他問如何初始化int或其他東西。 –

在你*.html文件的<button>元素上使用[ngClass]

<button [ngClass]="{'turn-green': userWroteName}">My Button</button>

在你*.css文件定義turn-green類

.turn-green { 
    background-color: green; 
}

在你*.ts文件中創建布爾變量userWroteName再有火災根據用戶是否在文本框中寫的東西一些功能。

userWroteName: false; 

function userTyped(value) { // fires on each keystroke 
    const minLengthForName = 3; // you choose your min accepted length 
    // some code you want here 
    if (value.length >= minLengthForName) { 
     this.userWroteName = true; 
    } else { 
     this.userWroteName = false; 
    } 
}

此代碼假定您正在收聽的每次擊鍵，並呼籲各userTyped()擊鍵正在鍵入。

來源

2017-10-08 12:41:01

所以我寫userWroteName：false;在導出類中，其餘的在構造函數中？因爲現在它什麼也沒有發生。如果我這樣做。 –

它不會進入構造函數。它是* .ts文件中的一個獨立函數。你的輸入字段有聽衆嗎？ –

不，我很抱歉，我不知道那是什麼:(但我可以很快地谷歌它 –

是否有可能改變按鈕的顏色？

回答

相關問題