Angular选择器重置后表格数据未同步更新问题求助

嘿，我懂这种模型明明改了但视图没跟上的闹心感！咱们一步步来解决这个问题：

先把重置按钮的写法捋对 #

首先得确保重置按钮用的是Angular的ng-click指令，而不是原生的onclick——毕竟Angular得感知到你触发了操作，才会去更新视图呀。比如按钮得这么写：

<button ng-click="$ctrl.resetSelector()">重置选择器</button>

然后在控制器里写重置函数时，不仅要把模型改回初始值，还要确保Angular的脏检查能触发（如果是在非Angular上下文修改模型的话）：

// 控制器内的代码
this.resetSelector = function() {
  // 把type重置成第一个选项的value（也就是空字符串）
  this.type = "";
  
  // 安全触发脏检查的写法，避免重复触发的报错
  if (!$scope.$$phase) {
    $scope.$apply();
  }
};

再确认表格数据和选择器的绑定关系 #

你得保证表格里的数据是跟着$ctrl.type变化的，比如用ng-repeat加过滤器的写法：

<table>
  <tr ng-repeat="item in $ctrl.data | filter:{type: $ctrl.type}">
    <td>{{item.name}}</td>
    <td>{{item.value}}</td>
  </tr>
</table>

要是表格数据根本没和$ctrl.type绑定，那选择器怎么变表格都不会有反应哦。

额外省心小技巧：换用ng-options生成选项 #

你现在是手动写的<option>，换成ng-options生成选项的话，模型绑定会更稳定，不容易出奇怪的问题：

<select ng-model="$ctrl.type" ng-options="opt.value as opt.label for opt in $ctrl.options">
</select>

控制器里定义选项数组：

this.options = [
  {value: "", label: "First option"},
  {value: "Second option", label: "Second option"},
  {value: "Third option", label: "Third option"}
];
// 初始值直接设成第一个选项的value
this.type = "";

这样重置的时候直接给this.type赋值空字符串就搞定了，Angular会自动帮你处理视图更新。

内容的提问来源于stack exchange，提问作者Leo Messi