两个具有相同值的下拉菜单。如果用户在第一个下拉列表中选择了一个值,则必须在第二个下拉列表中禁用该值
Two drop downs with same value. If user selects a value in first drop down then that value must be disable in second drop down
我是 angularjs 的新手。我在 html 中有 2 个具有相同值的下拉菜单。在这里,我希望每当用户在第一个下拉列表中选择一个值,然后该值想要在第二个下拉列表中禁用。
var app = angular.module('plunker', [ 'ngRoute' ]);
app.controller('queryCntrl', function($scope) {
$scope.names = [ "Ali", "Raj", "Ahm", "Sbm", "Lvy" ];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>Fund Transfer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="queryCntrl">
From <select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<div>
<br> To <select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
</body>
</html>
您可以使用 disable when
表达式来禁用选项。
From
<select ng-model="selectedName"
ng-options="name disable when (name.indexOf(selectedName1) > -1) for name in names">
</select>
<br> To
<select ng-model="selectedName1"
ng-options="name disable when (name.indexOf(selectedName) > -1) for name in names">
</select>
考虑到单身 select,您可以将条件更改为 selectedName == name
。
这里有一个不那么混乱的方法,
更新:这按预期工作
使用 disable when
,然后在 ng-options
中使用 expression
。我在 angular.js documentation
上找到了它
像这样,
From <select ng-model="selectedName"
ng-options="x for x in names">
</select>
<br> To <select ng-model="selectedName1"
ng-options="x disable when selectedName==x for x in names " >
</select>
更新:将 link 修复为工作代码
注意:我注意到您将 ng-controller
放在了错误的位置,ng-controller
也必须包裹第二个 select
字段(body
是理想的位置)。
我是 angularjs 的新手。我在 html 中有 2 个具有相同值的下拉菜单。在这里,我希望每当用户在第一个下拉列表中选择一个值,然后该值想要在第二个下拉列表中禁用。
var app = angular.module('plunker', [ 'ngRoute' ]);
app.controller('queryCntrl', function($scope) {
$scope.names = [ "Ali", "Raj", "Ahm", "Sbm", "Lvy" ];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>Fund Transfer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="queryCntrl">
From <select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<div>
<br> To <select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
</body>
</html>
您可以使用 disable when
表达式来禁用选项。
From
<select ng-model="selectedName"
ng-options="name disable when (name.indexOf(selectedName1) > -1) for name in names">
</select>
<br> To
<select ng-model="selectedName1"
ng-options="name disable when (name.indexOf(selectedName) > -1) for name in names">
</select>
考虑到单身 select,您可以将条件更改为 selectedName == name
。
这里有一个不那么混乱的方法,
更新:这按预期工作
使用 disable when
,然后在 ng-options
中使用 expression
。我在 angular.js documentation
像这样,
From <select ng-model="selectedName"
ng-options="x for x in names">
</select>
<br> To <select ng-model="selectedName1"
ng-options="x disable when selectedName==x for x in names " >
</select>