CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstraptwitter-bootstrap-3
MUHAMMAD MUBUSHER ASLAM
MUHAMMAD MUBUSHER ASLAM

Reputation: 309

Modal popup is opening even when button is disabled in angularjs

I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.

please take a look button code below:

<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
   Submit
</a>

I have below model popup code:

<div id="modal-form-submit" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="blue bigger"> DEMO MODEL FORM </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 col-xs-12">
                            <div class="form-group">
                                <label class="control-label" for="toitems">To:</label>
                                <div class="tags full-width">
                                    <span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
                                </div>
                            </div>
                        </div>
                    </div>                        
                </div>
                <hr />
                <div class="modal-footer">
                    <button class="btn btn-sm" data-dismiss="modal">
                        <i class="ace-icon fa fa-times"></i>
                        Cancel
                    </button>
                    <button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
                            ng-click="SaveEntireFormData()" type="button">
                        <i class="ace-icon fa fa-check"></i>
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>

I don't want to use the jquery js, I really want to resolve this using angular js.

Upvotes: 4

Views: 2378

Answers (4)

sadanand patel
sadanand patel

Reputation: 50

try this 

ng-disabled="(!ItemName) || (ItemDescription) "

if possible plz tell what is ItemName and ItemDescription.

remember that in angularjs if you want to disable any field you have to do this

ng-disabled = 'true' ;

Upvotes: 0

MUHAMMAD MUBUSHER ASLAM
MUHAMMAD MUBUSHER ASLAM

Reputation: 309

I did this and its working perfect.

<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">

Upvotes: 0

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.

Consider adding this CSS to fix this issue:

a[disabled] {
    pointer-events: none;
}

Upvotes: 2

Pranjal
Pranjal

Reputation: 1118

Just add disabled to your anchor tag class

<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">

Upvotes: 2

Related Questions