Question

我有两个选择框。当选择一个框中的“加拿大”时，我想在另一个框中隐藏“加拿大”选项。

我已经在我的JSFiddle中实现了它：https://jsfiddle.net/ealonwang/41ahaspr/11/。

<div ng-app="app" ng-controller="ctrl">
  <select ng-model="originCountry" ng-change="hideCan()">
    <option value="USA">USA</option>
    <option ng-hide="hideOriginCan" value="CAN">Canada</option>
  </select>
  <select ng-model="destCountry" ng-change="hideCan()">
    <option value="USA">USA</option>
    <option ng-hide="hideDestCan" value="CAN">Canada</option>
  </select>
</div>

angular.module("app", [])
  .controller("ctrl", function($scope) {
    $scope.originCountry = "USA";
    $scope.destCountry = "USA";

    $scope.hideCan = function() {
      if ($scope.originCountry == "CAN") {
        $scope.hideDestCan = true;
      } else {
        $scope.hideDestCan = false;
      }
      if ($scope.destCountry == "CAN") {
        $scope.hideOriginCan = true;
      } else {
        $scope.hideOriginCan = false;
      }
    }
})

然而，在我非常大的项目中（非常大），这种实现有一个延迟，不会完美。有没有办法消除这种延迟？感谢。

Answer 1

您可能需要ng-model-options的 debounce 选项。您可以在此处详细了解相关信息 - https://docs.angularjs.org/api/ng/directive/ngModelOptions

Answer 2

不确定是什么原因导致您的性能问题，因为我对周围的代码一无所知。无论如何，我只是想为您提供一个使用过滤器的替代方案：

＆＃13;

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.countries = ['USA', 'CANADA'];
  $scope.filterSelected = function(ignore) {
    return function(option) {
      return option !== ignore;
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <select ng-model="originCountry" ng-options="country for country in countries | filter: filterSelected(destCountry)">
    <option value=""></option>
  </select>
  <select ng-model="destCountry" ng-options="country for country in countries | filter: filterSelected(originCountry)">
     <option value=""></option>
  </select>
</div>

＆＃13;

虽然我无法知道在项目中集成此实现时的性能如何。

消除ng-change延迟

2 个答案: