HiI have 2 fields Invoice and Daysif i have selected Later option in dropdown then i need to enable the days field else disable the days fieldby default disable the date fieldcould you please help melthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpscdnjsclo

Hi mahesh213Refer below sampleHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs155angularjs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule39MyApp39 appcontroller39MyController39 function scope scopeDetails Name 39Invoice 139 IsDisabled true Name 39Invoice 139 IsDisabled true scopeTypeChange function invoice index if invoice 39Later39 invoice 3939 scopeDetailsindexIsDisabled true else scopeDetailsindexIsDisabled false

Enable Disable TextBox based on DropDownList in Table Row in AngularJS

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Feb 17, 2020 03:11 AM
Forum: AngularJS
Answer: 1
Views: 11574
Sample Code: Download

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

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Feb 17, 2020 05:51 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Enable Disable TextBox based on DropDownList in Table Row in AngularJS

Company

Explore

Follow us

Contact Us