Home / Frontend Codes and Demos / Frameworks / Angularjs / Enable and Disable drop down box using angularjs ngDisabled
angularjs disable dropdown using ngDisabled

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.

Enable and Disable drop down box using angularjs ngDisabled

angularjs disable dropdown using ngDisabled

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.

{loadposition position-9}

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.

{loadposition position-9}

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;     }; });

Demo

About CV

I'm frontend developer

Check Also

Angularjs Jasmine Service Dependency Injection

Angularjs Jasmine Service Dependency Injection

This tutorial will explain how to write the Jasmine unit test case for angularjs service dependency injection. End of the tutorial you will find the demo and download link.This tutorial will help to run the Jasmine unit test in browsers.