0

I have a basic widget block:

<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>

And here is the empty controller:

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

});

I'm using ng-click to hide/show the content, but I am trying to default the content to be visible, and also try to swap the image for the icon chevron down whenever it's hidden. I am very new to Angular and am looking for some direction in adding models and things to make these simple features work.

Any help would be appreciated.

EDIT: Made default visible by switching ng-class="{ 'hidden' : !showContent }" to ng-class="{ 'hidden' : showContent }"

4

1 回答 1

1

For the content to be visible by default, I would set $scope.showContent to true in the controller. You can use ng-class to change the chevron icon class based on the value of showContent in the following way: <i ng-class="{'icon-chevron-up': showContent, 'icon-chevron-down': !showContent}"></i>. Only the keys of the truthy values will be applied, so it will be either icon-chevron-up or icon-chevron-down. Let me know if I misunderstood your question!

于 2013-08-01T14:09:03.800 回答