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

Asked 1/7, 2017 at 9:5 Answered 1/7, 2017 at 9:33

Solved javascript html angularjs angularjs-directive ng-options

I'm new to angularjs. I've 2 drop downs with same values in html. Here I want whenever user selects a value in first drop down then that value want to disable in second drop down.

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="[email protected]" 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>

Jumbo answered 1/7, 2017 at 9:5 Comment(0)

You could use disable when expression to disable options.

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>

Demo Plunker

You could change condition to selectedName == name considering single select.

Merlon answered 1/7, 2017 at 9:14 Comment(0)

Here is a less confusing way,

update: this works as expected

use disable when then expression in ng-options. i found it on angular.js documentation

something like this,

 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>

here is a working code

Update: fixed the link to working code

Note: i noticed you placed your `ng-controller` on the wrong place, `ng-controller` must wrap the second `select` field too(`body` is the ideal place).

Arrive answered 1/7, 2017 at 9:33 Comment(2)

thanks @PankajParkar i thought the question was something else! – Arrive 1/7, 2017 at 10:10

OP wants to disable value inside dropdown of other select box, if other dropdown has that value selected.. Please look at above plunker. – Merlon 1/7, 2017 at 10:12

update: this works as expected

Update: fixed the link to working code

Note: i noticed you placed your `ng-controller` on the wrong place, `ng-controller` must wrap the second `select` field too(`body` is the ideal place).

Recommended topics

Hot tags

update: this works as expected

Update: fixed the link to working code

Note: i noticed you placed your ng-controller on the wrong place, ng-controller must wrap the second select field too(body is the ideal place).

Recommended topics

Hot tags

Note: i noticed you placed your `ng-controller` on the wrong place, `ng-controller` must wrap the second `select` field too(`body` is the ideal place).