0

我有一个表单，其中包含一堆关于使用 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>
4

1 回答 1

0

您可以利用该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 = '';
    }
  };
});

plunker 上的现场演示

于 2013-07-06T22:33:53.233 回答