AngularJS顯示/隱藏內容和交換圖像

Question

我有一個基本的構件塊：

<div class="matter ng-controller="ProductsCtrl"> 
    <div class="container-fluid"> 
     <div class="widget"> 
      <div class="widget-head"> 
       <div class="pull-left">Browse live products</div> 
        <div class="widget-icons pull-right"> 
         <a class="wminimize" href="#" ng-click="showContent = !showContent"><i class="icon-chevron-up"></i></a> 
        </div> 
       <div class="clearfix"></div> 
      </div><!--widget-head--> 

      <div class="widget-content" ng-class="{ 'hidden': !showContent }"> 
       <div class="padd"> 

       <div> 
        {{content}} 
       </div> 

       </div> 
       <div class="widget-foot"></div> 

      </div><!--widget-content--> 
     </div><!--widget--> 
    </div> 
</div> 

這裏是空的控制器：

appAdmin.controller("ProductsCtrl", function($scope){ 

}); 

我使用NG-點擊隱藏/顯示內容，但我試圖默認內容是可見的，並且嘗試在隱藏時將圖標交換爲圖標V形。我對Angular非常陌生，正在尋找一些方向來增加模型和事物，以使這些簡單的功能發揮作用。

任何幫助，將不勝感激。

編輯：默認製造切換ng-class="{ 'hidden' : !showContent }"到ng-class="{ 'hidden' : showContent }"

Answer 1

對於內容提供默認情況下可見明顯的，我會成立$scope.showContent爲true控制器。您可以使用ng-class以下列方式基於showContent的值更改V形圖標類：<i ng-class="{'icon-chevron-up': showContent, 'icon-chevron-down': !showContent}"></i>。只有truthy值的鍵纔會被應用，因此它將是icon-chevron-up或icon-chevron-down。如果我誤解了你的問題，請告訴我！