2016-05-12 11 views
1

私は、ブートストラップを使ってAngularJSプロジェクトを作っています。ここで角度|ボタンのアクティブクラスを削除する

はJSfiddleです:https://jsfiddle.net/mijacat/dmuuu79v/3/

私はそれが瞬時に.btn btn-defaultから.btn btn-infoに前後に変更する必要があり、ボタンを切り替えることができるようにしたいと思います。しかし、通常、ボタンは「アクティブ」で、2回目のクリックで状態が変わります。

ワンクリックでどうすればいいですか?可能であればAngularを使用したソリューションはありますか?これは、ボタンの状態を後で別のものに変更したいと考えているからです。

+1

あなたはシングルクリックで二回ボタンクラスを変更しますか?あなたのUIにはほとんど気づかないほどの効果があることは承知していますか? – MarcoS

+0

こんにちはマルコ。いいえ、私はクリックすると、 'info'クラスを切り替えて、再び 'default'クラスをトグルすることを意味しました。申し訳ありませんが私は明確でない場合。 –

+0

jsfiddleのあなたのコードはすでにそのように動作していませんか? – MarcoS

答えて

4

だけng-classを使用します。

<button class="btn" ng-class="{'btn-info': some_condition}">...</button> 

はここで更新JSFiddle(も$index変数の使用に注意してください)です:あなたが持っているhttps://jsfiddle.net/dmuuu79v/4/

+0

ありがとう、これは角度を使用して私の最初のプロジェクトです。 '$ index'変数に注目しましょう! –

1

問題は、状態を維持するための一つの変数$scope.isToggledを持っているということですすべてのボタンのあなたはそれを別々に保つべきです。

私はあなたのフィドルを修正しています https://jsfiddle.net/dmuuu79v/5/

+0

これもとてもうまく動作します、ありがとう! –

関連する問題