代码之家 › 专栏 › 技术社区 › aprzybyÅa

如何通过angularjs操作选择选项

angularjs-ng-options angularjs

3

aprzybyÅa · 技术社区 · 8 年前

我有以下问题,我有3个选择字段(由生成 ngOptions )选项很少(100200300)。例如,带有的选项 顶部宽度 , 边 , 底部 ,(此字段中的宽度相同),我有两个条件:

顶部宽度不能大于侧面宽度(因此如果宽度侧面为100,顶部宽度可以等于0到100)。
底部可以大于侧面(因此,如果侧面宽度为100,则底部宽度可以大于100)

在选择之后,我需要从选择字段访问这个赋值。

我必须按照指令用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>

1 回复 | 直到 8 年前

1

0

Kaushal Niraula 8 年前

可以使用函数返回ng-select中的选项。可以将变量作为$scope进行访问。播放器,$scope。播放器1,$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>