javascript - 过滤掉选择选项后，Angular 模型无法更新

Question

试图找出当绑定(bind)的选定选项不再存在时模型不更新的原因。我希望模型的属性更新为未定义/空/空字符串。

情况:一个select 使用过滤器驱动另一个select。选择完成后，转到原来的 select 并选择另一个选项。过滤器将按预期删除第二个 select 选项，但第二个 select 上的模型属性将保持不变。

问题:当您通过模型时，它会填充错误/先前的值。此外，使用 Angular 验证时，select 是必需的...表单在技术上是“有效的”，因为模型具有该属性的值(先前的值)。

HTML:

<select name="Category" ng-model="selectedCategory" 
       ng-options="item.name as item.name for item in categories">
   <option value="">All Categories</option>
</select>

<select name="SubCategory" ng-model="selectedSubCategory" 
       ng-options="item.name as item.subCategory for item in categories | filter:selectedCategory">
  <option value="">All SubCategories</option>
</select>

型号:

app.controller('MainCtrl', function($scope) {
   $scope.categories = [{
      "id": "1",
      "name": "Truck",
      "subCategory": "Telescope"
   }, {
      "id": "2",
      "name": "Truck",
      "subCategory": "Hazmat"
   }, {
      "id": "3",
      "name": "Van",
      "subCategory": "Mini"
   }];
});

我相当确定我可以将 ng-change 函数绑定(bind)到第一个函数以强制它更新模型，但是有更好的方法吗？

示例 Plunker证明问题

Answer 1

试试这个方法:

$scope.$watch('selectedCategory', function(selectedCategory){
    $scope.selectedSubCategory = null;
});