Dropdown Select with ng-disable

AngularJS implementation of disabled dropdown that still passes value.

by Thomas Langston

HTML

<div ng-app="app">
	<div ng-controller="dropdownController">
		<select name="cat" ng-model="cat" ng-options="item.value as item.label for item in cats" ng-disabled="catDisabled">  
    </select>
		<input name="cat" type="hidden" ng-disabled="!catDisabled" ng-model="cat">
		<input type="text" ng-model="cat"/>
    <br/>
    <label><input type="checkbox" ng-model="catDisabled"> Disable?</label>
	</div>
</div>

JavaScript

angular.module('app', []).controller('dropdownController', function($scope){
	$scope.form = [];
  
  $scope.cats = [
  	{value: 1, label: 'Mufasa'},
    {value: 2, label: 'Simba'},
    {value: 3, label: 'Scar'},
    {value: 4, label: 'Fluffy'}
  ];
});