Enable/Disable button by selected value in drop down list using AngularJS
I have one button called test and one drop-down menu with three values. How to enable-disable Test button according to value selected in drop down menu. Eg. If selected "Not Ready" , button should disable If selected Ready or Attention, button should enable
<div class="row">
<div>
<button id="testBtn" class="btn btn-default" >Test</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select name="select">
<option value="value1" selected>Not ready</option>
<option value="value2">Ready</option>
<option value="value3">Attention !!</option>
</select>
</div>
</div>
See Plunker
Answer
You need an Angular app and controller. From there you can bind a model to your select, and then use an expression with the ng-disabled directive on the button to enable and disable it dynamically depending on the value in the box. See below. ng-model on the select binds it to $scope.currentState which is what I compare my literal string against in the ng-disabled directive on the button.
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.states = ['Not ready', 'Ready', 'Attention !!'];
$scope.currentState = 'Not ready';
});<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div>
<button id="testBtn" class="btn btn-default" ng-disabled="currentState === 'Not ready'">Test</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select name="select" ng-model="currentState" ng-options="state as state for state in states">
</select>
</div>
</div>
</body>
</html>