ng-if展开收起列表

用ng-if判断当displayMore值为false时列表状态为收起状态，显示的按钮为展开按钮；

当displayMore的值为true时列表状态为展开状态，显示的按钮为收起按钮；

html代码：

<div class="edit-template-column">
    <div layout="row" layout-align="space-between center" class="margin-bottom-10">
        已选中的列(可对列进行拖动排序):
        <a style="color: #A2A2A2;" ng-if="$ctrl.displayMore"
           ng-click="$ctrl.changeDisplayMore()">
            <i class="glyphicon glyphicon-chevron-up"></i>
            收起
        </a>
        <a style="color: #A2A2A2;" ng-if="!$ctrl.displayMore"
           ng-click="$ctrl.changeDisplayMore()">
            <i class="glyphicon glyphicon-chevron-down"></i>
            展开
        </a>
    </div>
    <!--站点-->
    <table class="table table-bordered table-list table-striped no-margin-bottom">
        <thead>
        <tr>
            <th width="60" class="text-center">排序</th>
            <th>列名</th>
            <th width="100">主键</th>
            <th width="100">必填</th>
        </tr>
        </thead>
        <tbody data-ng-model="table.ListColumn" as-sortable>
        <tr ng-repeat="selectedColumn in table.ListColumn"
            ng-if="!$ctrl.displayMore && $index<4 || $ctrl.displayMore" as-sortable-item>
　　　　　　　　//设置展开收起的内容
            <td class="text-center">
                <md-icon class="material-icons step icon-24-999"
                         ng-bind="' open_with'" as-sortable-item-handle>
                </md-icon>
            </td>
            <td>{{selectedColumn | columnTranslateFilter}}</td>
            <td><span ng-if="selectedColumn.IsPrimaryKey">{{'true' | translate}}</span></td>
            <td><span ng-if="selectedColumn.IsRequired">{{'true' | translate}}</span></td>
        </tr>
        </tbody>
    </table>
</div>

JS代码：

var self = this；
//定义初始状态为收起状态
self.displayMore = false;
self.changeDisplayMore = function () {
   self.displayMore = !self.displayMore
}；

收起时状态：

展开时状态：