Hi,
I have 2 fields Invoice and Days
if i have selected Later option in dropdown then i need to enable the days field else disable the days field
by default disable the date field
could you please help me
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Details = [{ Name: '' }];
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<table id="tblOrders" class="table table-responsive">
<tr>
<th>Invoice</th>
<th>Days</th>
</tr>
<tbody ng-repeat="detail in Details">
<tr>
<td><input type="text" ng-model="detail.Name" /></td>
<td>
<select style="width:200px" ng-model="detail.Invoice" class="form-control" ng-change="TypeChange(detail.Invoice)">
<option value="">Select Invoice</option>
<option value="Immediate">Immediate</option>
<option value="Later">Later</option>
</select>
</td>
<td><input type="text" ng-model="detail.Days" /></td>
</tr>
</tbody>
</table>
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
Hi mahesh213,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Details = [{ Name: 'Invoice 1', IsDisabled: true }, { Name: 'Invoice 1', IsDisabled: true}];
$scope.TypeChange = function (invoice, index) {
if (invoice == 'Later' || invoice == '') {
$scope.Details[index].IsDisabled = true;
} else {
$scope.Details[index].IsDisabled = false;
}
}
});
</script>
</head>
<body>
<body ng-app="MyApp" ng-controller="MyController">
<table id="tblOrders" class="table table-responsive">
<tr>
<th>Invoice</th>
<th>Days</th>
<th></th>
</tr>
<tbody ng-repeat="detail in Details">
<tr>
<td><input type="text" ng-model="detail.Name" /></td>
<td>
<select ng-model="detail.Invoice" ng-change="TypeChange(detail.Invoice,$index)">
<option value="">Select Invoice</option>
<option value="Immediate">Immediate</option>
<option value="Later">Later</option>
</select>
</td>
<td><input type="text" ng-model="detail.Days" ng-disabled="detail.IsDisabled" /></td>
</tr>
</tbody>
</table>
</body>
</body>
</html>
Demo
