Javascript 如何删除不再绑定到dom的模型

我有一个表单，它有一系列关于使用ng if显示哪些元素的逻辑。例如，我可能有一个国家下拉列表，如果选择美国，它将显示国家下拉列表，该下拉列表以国家的ng if为条件。也许这不是最好的方法，如果有一个不同的方法为下一个项目的建议，将被赞赏，但我需要完成这个项目，很少有重大修改

问题是，如果用户选择一个国家，比如说美国，然后选择一个州，然后选择另一个国家。该状态仍在模型中选定。那么我该如何删除state字段呢。有很多嵌套的ng if（考虑4-5个级别）

例子

{{root.productType}}Type
体色
车身颜色PMS代码

您可以利用

ng change

指令为您带来好处；在父选择框上设置一个，并实现其处理程序以清除任何依赖于它的子选择框的值

下面是一个演示如何实现这一点的快速片段：

var-app=angular.module（'myModule'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.countries=[“日本”、“巴西”、“英国”]；
$scope.selectedCountry='Brasil'；
$scope.selectedCity=''；
$scope.japancies=[“东京”、“横滨”、“大阪”]
$scope.isJapanSelected=函数（）{
返回$scope.selectedCountry==“日本”；
};
$scope.getCity=function（）{
返回$scope.selectedCity；
};
$scope.setCity=功能（城市）{
$scope.selectedCity=城市；
};
$scope.clearCity=函数（）{
if（！$scope.isJapanSelected（））{
$scope.selectedCity=''；
}
};
});

---

---

也许这就是您的解决方案：^^^^这是一个角度应用程序，不是jQuery。不确定如何设置“嵌套”，但如果状态是嵌套的：

。不过，这可能会有点冗长。可能会发布一些示例代码，在选择新国家/地区时“取消选择”该州。例如，将其设置为null、空或其他值。因此，虽然这实现了我想要的结果，但当我必须在整个代码库中显式地编写50次代码时，它会变得非常笨拙。有没有一种方法，也许通过一个指令，我可以自动做到这一点？好吧，你可以将它全部分组到一个组件中（编写一个指令，对所有依赖的选择框进行分组和封装）。我不太明白你的意思？你刚才说的和我的意思差不多。我不想在字段更改时指出哪些字段被清除。如果我可以在html中说一些类似嵌套If model=“country==”Japan'”的话，那么它的行为就像一个ng If，除非当If语句为false时，它会自动重置dom中提到的所有作为子级的模型。

<div ng-if="root.originCountry == 'PAK'">
  <div ng-if="root.productType == 'Custom Football Jersey' || root.productType == 'Sublimated Football Jersey'">
    <div class="control-group">
      <label class="control-label" for="productTypeType">{{root.productType}} Type</label>
      <div class="controls">
        <select ng-model="root.productTypeType" ng-options="type for type in pakJerseyTypeList" bs-select required></select>
      </div>
    </div>
    <div class="ordered-container">
      <div ng-if="root.productTypeType">
        <div class="control-group">
          <label class="control-label" for="bodyColor">Body Color</label>
          <div class="controls">
            <select ng-model="root.bodyColor" ng-options="color for color in bodyColorList" bs-select required></select>
          </div>
        </div>
        <div ng-if="root.bodyColor == 'Other'"> 
          <div class="control-group no-count">
            <label class="control-label" for="bodyColorPmsCode">Body Color PMS Code</label class="control-label no-count">
            <div class="controls">
              <input type="text" ng-model="root.bodyColorPmsCode" name='bodyColorPmsCode' required>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>