角トグルボタン

Question

別のページを表示する2つのラジオボタンを持つブートストラップテーマの角度アプリがあります。両方を同時に選択することはできません。 1つを選択すると、btn btn-primary activeがクラス値になり、選択されていないもう1つのクラス属性はクラス属性btn btn-secondaryになります。

私は何時間もGoogle検索と遊んでいました。 Here's the plunkerこれまでの私の試行と。私が間違っていることは何か考えていますか？オフされている

Answer 1

クラスbtn btn-primary btn-secondaryを使用するので、bootstrapリンクを追加するbootstrapを使用していませんでした。

ng -classの式が無効です。その最初はfalse選択したプロパティを持つすべてのビューボタン情報を格納するための配列を使用することをお勧め

class="btn ng-class:button.view1Selected ? 'btn-primary active' : 'btn-secondary'"

の

class="btn" ng-class="button.view1Selected ? 'btn-primary active' : 'btn-secondary'"

instedを使用する必要があります。

のような： $scope.views = [{isSelected: false},{isSelected: false}]; //インデックス...第一ボタンの0ベースの `または特定のプロパティは、選択したとに応じてクラスを設定されている

といずれかのボタンをクリックしたとき、そのボタンを設定する必要があるとして、基づくことができます特定のボタンのアクティブフラグを設定する関数を呼び出します。

のような：ng-click="selectedButton(1)"

など、クラスを設定するチェック：ng-class="views[0].isSelected ? 'btn-primary active' : 'btn-secondary'"

selectedButton機能のように：//：

$scope.selectedButton = function(viewIndex){ 
    angular.forEach($scope.views, function(view, index) { 
     if(viewIndex == index) { 
     view.isSelected = ! view.isSelected; 
     } else { 
     view.isSelected = false; 
     } 
    }); 
    }; 

See Plunker Demo

Answer 2

がいくつか

1. あなたはAngularJSが含まれていませんでした。もちろん、それは実行されません、それは全くありません...

2. あなたは間違った方法でクラスとしてng-classを使用しようとしています。 ng-class属性を使用すると、通常は*が簡単になりますが、間違った形式になっています。 ng-class=!view.isSelected ? 'btn-primary active' : 'btn-secondary'があり、これはng-class:!view.isSelected ? 'btn-primary active' : 'btn-secondary'である必要があります。 =記号の代わりに:に注意してください。

   *これはあなたががng-classのclassバージョンを（それがそうすることを確実に有効です）を使用することはできませんが、私は一般的にclass属性の静的クラスを持っている区別をしたい、とと言っているわけではありません動的なものはng-classです。

3. コントローラがありません。技術的には、ビューは未定義を否定することによって "正真正銘"にスコープ変数を作成することができますが（これは非常に厄介な方法です）、これはせいぜいバイナリ/トグル無線セットを1つ、または相互にトグルを許可しました。コントローラーにがあります。は、どのボタンが押されているかを保持するスコープ変数です（それぞれのボタンは何かをクリックすると設定されます）。ng-classがそれを評価します。あなたのplunkerデモで