In AngularJs we can able to disable or enable the dropdown like jQuery does. Using ngDisabled function in angularjs we can achive the functionality. Demo will be available at end of the tutorial.
Let’s start the tutorial
AngularJs ng-disabled
Add HTML code
`<div class="well" ng-controller="appCtrl">
<input type="checkbox" ng-model="checked" ng-change="toggleDisablingDropdown()">
<select name="select" ng-disabled="isDisable">
<option value="item1">item1</option>
<option value="item2">item2</option>
</select>
</div>`Above code has drop down with checkbox. When check box checked or unchecked the dropdown will be disabled or enabled. Model “checked” id for checkbox and model isDisable for dropdown list.
Add below Angularjs
`var app = angular.module('angularDemo', [
'ngRoute'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/main.html", controller: "appCtrl"})
// else Home
.otherwise("/", {templateUrl: "partials/main.html", controller: "appCtrl"});
}]);
app.controller('appCtrl', function($scope) {
$scope.toggleDisablingDropdown = function(){
$scope.isDisable = $scope.checked;
};
});`
