Enable Disable TextBox based on DropDownList in Table Row in AngularJS

mahesh213
 
on Feb 17, 2020 03:11 AM
Sample_129247.zip
3068 Views

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
dharmendr
 
on Feb 17, 2020 05:51 AM

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