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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With