Question

我有一个表格，其中包含一系列逻辑，说明使用ng-if显示哪些元素。例如，我可能有一个国家下拉，如果选择美国，它将显示状态下拉，这取决于国家的ng-if。也许这不是最好的方法，所以如果有下一个项目的不同方法的建议值得赞赏，但我需要完成这个项目，几乎没有什么重大修改。

问题是如果用户选择一个国家说美国然后选择一个州，然后选择一个不同的国家。仍在模型中选择状态。那么我将如何去除状态字段。有深度嵌套的ng-if（考虑4-5级）。

实施例

<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>

Answer 1

您可以利用ng-change指令;在父选择框上设置一个并实现其处理程序，以根据它清除任何子选择框的值。

以下是一个快速摘录，说明如何实现这一目标：

<select 
  ng-model="selectedCountry"
  ng-options="country for country in countries"
  ng-change="clearCity()">
</select>

<select 
  ng-model="selectedCity" 
  ng-if="isJapanSelected()" 
  ng-options="city for city in japanCities"
  ng-change="setCity(selectedCity)">
</select>

var app = angular.module('myModule', []);

app.controller('MainCtrl', function($scope) {
  $scope.countries = ['Japan', 'Brasil', 'England'];
  $scope.selectedCountry = 'Brasil';
  $scope.selectedCity = '';
  $scope.japanCities = ['Tokyo', 'Yokohama', 'Osaka']
  $scope.isJapanSelected = function() {
    return $scope.selectedCountry == 'Japan';
  };
  $scope.getCity = function() {
    return $scope.selectedCity;
  };
  $scope.setCity = function(city) {
    $scope.selectedCity = city;
  };
  $scope.clearCity = function() {
    if (!$scope.isJapanSelected()) {
      $scope.selectedCity = '';
    }
  };
});

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

实施例

1 个答案:

Live demonstration on plunker