我如何通过 angularjs 操作 select 选项

Question

我有以下问题，我有 3 个 select 字段（由 ngOptions 生成），选项很少 (100,200,300)。例如选项 width for top, sides, bottom, (这个宽度是一样的字段），我有 2 个条件：

顶部宽度不能大于侧面宽度（所以如果宽度 sides 为 100，top width 可以等于 0 到 100）。
宽度 bottom 可以大于 sides（所以如果 width sides 是 100，底部宽度可以超过 100)

在选择之后，我需要从 select 字段中访问这个分配的值。

我必须按照指令在 angularjs 中执行此操作。

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.widths = [{ width: 300 }, { width: 500 }, { width: 400 }];
});

<html ng-app="myApp">
<head>
 <title></title>
</head>
<body>
<div ng-controller="Ctrl">
  
        <select ng-model="player" ng-options="w.width for w in widths track by w.width" id="top"></select>
        <select ng-model="player2" ng-options="w.width for w in widths track by w.width" id="sides"></select>
        <select ng-model="player3" ng-options="w.width for w in widths track by w.width" id="bottom"></select>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>
  </html>

Answer 1

您可以使用函数 return ng-select 中的选项 .您可以访问变量 $scope.player, $scope.player1, $scope.player2 正如您已经定义的那样。确保将三个变量初始化为默认值（否则它未定义并在下拉列表中显示为空白选项）

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.widths = [{ width: 300 }, { width: 500 }, { width: 400 }];
    $scope.getTopOptions = function () {
                var ret = [];
                if (!$scope.player2) {
                    return $scope.widths;
                }
                angular.forEach($scope.widths, function (width) {
                    if (width.width <= $scope.player2.width) {
                        ret.push(width);
                    }
                });
                return ret;
            };

            $scope.getBottomOptions = function(){
                var ret = [];
                if(!$scope.player2){
                    return $scope.widths;
                }
                angular.forEach($scope.widths, function (width) {
                    if (width.width > $scope.player2.width) {
                        ret.push(width);
                    }
                });
                return ret;

            }
});

<html ng-app="myApp">
<head>
 <title></title>
</head>
<body>
<div ng-controller="Ctrl">
  
        <select ng-model="player" ng-options="w.width for w in getTopOptions() track by w.width" id="top"></select>
        <select ng-model="player2" ng-options="w.width for w in widths track by w.width" id="sides"></select>
        <select ng-model="player3" ng-options="w.width for w in getBottomOptions() track by w.width" id="bottom"></select>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>
  </html>

我如何通过 angularjs 操作 select 选项

How can i manipulate the select options by angularjs

angularjs

angularjs-ng-options