Question

我有一个显示全部或显示我按钮，可以使用true或false切换vm.todoShowAll。

这是我的控制器代码：

var vm = this;
vm.init = function() {
    vm.todoShowAll   = false;
    vm.myName        = "Torben";
}

vm.showTodo = function () {
    vm.todoShowAll = !vm.todoShowAll;
    return false;
}

当 false 时，我只想显示我的待办事项todos.name==vm.myName并隐藏表格中的名称列

当 true 时，我想显示所有ToDo任务并在表格中显示名称列

......并且没有表格改变形状的原因

不幸的是，这就是它现在的样子：

我不知道如何过滤/不过滤，我不知道如何避免表格更改宽度。

这是我的HTML代码：

<table border="0" cellspacing="0" cellpadding="0" class="start-todo start-todo-table start-todo-hover" ng-if="vm.todo.length > 0">
<thead>
    <tr class="start-header start-bold start-todo-bg">
        <th colspan="6" class="start-padding overflow start-left">
           ToDo List
            <a ng-click="vm.showTodo()" ng-hide="vm.todoShowAll">
                <button class="start-todo-btn start-button" style="width:80px; margin-left:5px;">SHOW ALL</button>
            </a>
            <a ng-click="vm.showTodo()" ng-show="vm.todoShowAll">
                <button class="start-todo-btn start-button" style="width:80px; margin-left:5px;">SHOW ME</button>
            </a>
            <a ui-sref="book()">
                <button class="start-todo-btn start-button" style="width:80px;">NEW TODO</button>
            </a>
        </th>
    </tr>
    <tr class="start-header start-head start-todo-bg">
        <th class="start-left nowrap" style="min-width:66px;">Property</th>
        <th class="start-left overflow" style="width:18%">Category</th>
        <th class="start-left overflow" style="width:45%">Task</th>
        <th class="start-left overflow" style="width:15%">Time</th>
        <th class="start-right overflow" style="width:10%">Day</th>
        <th class="start-left overflow" style="width:15%" ng-show="vm.todoShowAll">Name</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="todos in vm.todo | orderBy:'days'" class="start-text">
        <td class="start-left start-border nowrap">{{ todos.property }}</td>
        <td class="start-left start-border start-smaller overflow">{{ todos.todoCategory }}</td>
        <td class="start-left start-border overflow">{{ todos.task }}</td>
        <td class="start-left start-border overflow">{{ todos.time }}</td>
        <td class="start-right start-border overflow start-bold greennum">
            <span ng-class="(todo.days) > 0 ? 'greennum' : 'rednum'"><b>{{todos.days}}</b></span>
        </td>
        <td class="start-left start-border overflow" ng-show="vm.todoShowAll">{{ todos.name }}</td>
    </tr>
</tbody>
</table>

Answer 1

要过滤列，可以在ng-repeat指令中添加过滤器。这看起来像这样：

<tr ng-repeat="todos in vm.todo | filter:vm.nameFilter | orderBy:'days'" class="start-text">
..
</tr>

然后在您的控制器中，您可以添加如下过滤器功能：

vm.nameFilter = function(item){
    return vm.todoShowAll || item.name === vm.myName;
}

要让表格具有相同的宽度，只需在width: 100%类中添加start-todo-table样式：

.start-todo-table {
    width: 100%;
}

以角度显示/隐藏th / td取决于按钮单击而不更改表格宽度

1 个答案: