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-click来隐藏/显示内容，但我试图将内容默认为可见，并且还会尝试在隐藏图标时将图像交换为图标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。如果我误解了你的问题，请告诉我！

AngularJS显示/隐藏内容并交换图像

1 个答案: