Question

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的选项。

Answer 1

您可以尝试这样的事情：

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的选项。希望这能帮助您实现目标。感谢。

Answer 2

您可以使用选项标记中的禁用属性。

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

控制器：

  $scope.isDisabled= function(value) {
      return value > $scope.availVal;
  };

您可以在此处测试：http://jsfiddle.net/9dpepxak/1/

Answer 3

您可以尝试以下代码：

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

根据条件禁用下拉列表中某些选项的单击/选择

3 个答案: