Angularjs 根据按钮点击角度显示/隐藏th/td，而不更改表格宽度

我有一个Show All或Show Me按钮，可以将

vm.todoShowAll

切换为true或false

这是我的控制器代码：

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

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

当其false时，我只想显示我的ToDo任务，其中

todos.name==vm.myName

并隐藏表中的name列

当其为true时我希望显示所有待办任务并在表中显示name列

…当然，桌子不会改变形状

不幸的是，现在的情况是这样的：

我不知道如何过滤/取消过滤，也不知道如何避免表格改变宽度

以下是我的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>

待办事项清单
全部展示
向我展示
新待办事项
财产
类别
任务
时间
白天
名称
{{todos.property}}
{{todos.todoCategory}}
{{todos.task}}
{{todos.time}}
{{todos.days}
{{todos.name}

要筛选列，可以向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;
}

要使表具有相同的宽度，只需将

宽度：100%

样式添加到

开始待办事项表中

类：

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

---

Nikolaj du er代表vild！！：-它工作得很好。（需要一个|在

过滤器中：vm.nameFilter | orderBy:'days'

但现在一切都很好，还有表格。非常感谢！！！（泰国såkig forbi os）