javascript - 根据条件禁用下拉菜单中某些选项的单击/选择

HTML（查看侧）：

<select ng-model="selectedValue" ng-change="updateSelectedValue(selectedValue)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

控制器端：

$scope.availValue = product.qty //It's dynamic, getting updated on an API call

$scope.updateSelectedValue = function(currentSelectedValue) {
    if(currentSelectedValue > $scope.availValue) {
      //write code such that if this condition is true than do not let the user click/select options whose value is greater than $scope.availValue, i.e. disable those options
      //just display all options but do not let the user click/select   those options whose value is exceeding $scope.availValue
    }
};

例：

     $scope.selectedValue = 7;

     $scope.availVal = 4;

预期输出：显示所有10个选项，但不允许用户单击/选择值大于4的选项。

最佳答案

您可以尝试如下操作：

var app = angular.module("Demo", []);

app.controller("AppController", function($scope) {
  $scope.ddlValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  $scope.availVal = 4;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
  <div ng-controller="AppController">
    <input type="text" ng-model="availVal" />
    <br/><br/>
    <select ng-model="selectedValue">
      <option value="">--Select--</option>
      <option ng-repeat="val in ddlValues" ng-value="val" ng-disabled="val > availVal">{{ val }}</option>
    </select>
  </div>
</div>

JsFiddle：https://jsfiddle.net/sktajbir/6fmvsaf0/15/

这里发生的是，它正在监视availVal并禁用了那些超过availVal的选项。希望这会帮助您实现目标。谢谢。