角度jsを使用してクラスのプロパティを変更する方法

Question

ここでいくつかの例を見てきました。しかし、やはり次のことをどうやって行うのか混乱します。

2つのスクリーンショットがあります。 最初のスクリーンショットは、携帯電話のデフォルトビューを示しています。しかし、2nd row (i.e. Rahul Thusso)をクリックするたびに、スクリーンショット2のような画面が表示されます。 the back button i.e. <-をクリックすると、Rahul Thussoの詳細を持つ右側のパネルが表示されなくなります。

私は@media .... .master-container-rt{ width: 0%; }を使用しましたが、それは静的であり、私の問題は解決しません。

デフォルトでは、画面のロード時にmaster-container-rt{ width: 0%; }が正常です。 Rahul Thussoの行をクリックすると、理想的な画面はmaster-container-rt{ width:100%; }になり、最後に<-ボタンmaster-container-rt{ width: 0% }をクリックすると問題ありません。

Angular JSでどのように実現するのですか？

スクリーンショット1-デフォルト画面

スクリーンショット2右パネルには、有効画面

Answer 1

あなたは最高のあなたに合った方ng-styleまたはng-classを使用することができます。条件付きで使用することもできます。バイブルに続いてあなたを助けるかもしれません。

http://jsfiddle.net/ADukg/9326/ 

Answer 2

スコープには2つの機能が必要です。

$scope.showBox = function() { 
       $scope.width = "100%" 
} 

$scope.hideBox = function(){ 
       $scope.width = "0%"; 
} 

あなたのHTMLには、表示または非表示にしたい要素にng-style="{width: width}"を追加します。 を入力し、行要素と戻るボタンにそれぞれng-click="showBox()"とng-click="hideBox()"を追加します。