重置选择器无法正确重置表格数据答案

【问题标题】：Reset selector does not reset the table data properly重置选择器无法正确重置表格数据
【发布时间】：2018-04-19 08:07:13
【问题描述】：

我有一个带有多个选项的选择器和一个重置按钮，单击该按钮时必须将选择器重置为第一个选项。

点击按钮时选择器被重置，但表中的数据没有改变。

这些是选择器和按钮：

<select ng-model="$ctrl.type">
    <option value="">First option</option>
    <option value="Second option">Second option</option>
    <option value="Third option">Third option</option>
</select>

<div class="btn action-btn" ng-click="$ctrl.doReset()">
    Reset options
</div>

选择器过滤表中的数据：

<tbody>
    <tr ng-repeat="rows in $ctrl.myData | filter: {Type:type} track by $index">
        <td>
            <span>{{rows.Type}}</span>
        </td>
        <td>
            <span ng-repeat="row in rows.Parameters track by $index">{{rows.Parameters[$index]}}</span>
        </td>
        <td>
            {{rows.OccuranceDate}}
        </td>
    </tr>
</tbody>

选择器、按钮和表格都在同一个html页面中。

在控制器中我有这个：

class MyCtrl {
    constructor(MyService, $stateParams) {
        this.MyService = MyService;
        this.loading = true;
        ...

    }
    $onInit() {
        ...
    }
    ...

    doReset() {
        this.type = "";
    }
}

第一个选项的值为""，这就是我在doReset() 中尝试做的事情，它将选择器中的选项重置为第一个，但不会重置表中的数据。我还想重置表格数据。

知道有什么问题吗？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您的问题在于您的过滤变量，您的过滤器是 filter: {Type: type} 但它应该绑定到您的 $scope ($ctrl) 变量，如下所示：filter: {Type: $ctrl.type}

请看例子here

【讨论】：