0

So I want to show a bootstrap modal if a property trigger is false as shown in the code below. Basically, if a benefit selected in above control has a property for hasFunds as false, then show modal once that benefit is selected (will show that code at bottom), but if true, nothing happens with modal.

Code for modal:

<!-- hasFunds Modal -->
<div class="modal fade" id="hasFundsModal" tabindex="-1" role="dialog" aria-labelledby="hasFundsModalLabel" aria-hidden="true" ng-show="benefit.hasFunds == false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
                <p>You have already claimed the full amount of your benefit, and so there may be no remaining funds to reimburse this claim. Are you sure you want to continue?</p>
            </div>
            <div class="modal-footer">
                <input type="button" class="naviaBtn naviaBlue" data-dismiss="modal" value="yes">
                <input type="button" class="naviaBtn naviaBlue" data-dismiss="modal" value="no">                                        
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

The control above which has a dropdown selector that contains the property that triggers the true or false:

<div class="form-group col-md-6 naviaInp">
    <label for="beneSelect">Select your benefit</label>
    <select class="form-control" name="beneSelect" id="beneSelect" ng-model="benefit" ng-options="item.descr for item in claim" ng-required="true">
         <option value="">Please select a benefit....</option>
     </select>
    <input type="hidden" ng-model="claimInfo.benefitId" ng-change="{{ claimInfo.benefitId = benefit.id }}"/>
</div>
<div ng-show="claimForm.beneSelect.$dirty && claimForm.beneSelect.$error.required" class="errorContainer">
    <p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>

Currently, no modal shows whether true or false. Can't a modal be triggered from an ng-show?

Thanks much.

Mark
  • 1,812
  • 3
  • 29
  • 51
  • Are you asking how to make an element visible if some expression evaluates to false? – Ahmed Nov 30 '15 at 20:48
  • Also, are you using https://angular-ui.github.io/bootstrap/#/modal ? if so, your implementation is off, you may want to revisit that link. ng-show simply makes a particular element visible or not visible when an expression is met. In the case of a bootstrap modal, there are more things needed than just making something visible and not visible. – kyler Nov 30 '15 at 20:51
  • I had the exact same issue as yourself, ended up taking advice from an answer and simply putting the HTML template IN my main HTML, using bootstrap css for its design. Then simply housing it in a div and use your ng-show as you know how :D You've probably seen it already but it works well enough: https://stackoverflow.com/questions/33525361/angularjs-possible-to-ng-show-ng-hide-a-modal-window – notAChance Nov 30 '15 at 21:06

1 Answers1

0

If you are using UI Bootstrap, see docs for Modal directive: https://angular-ui.github.io/bootstrap/#/modal

You need to call $uibModal.open() with an option argument from the controller in order for the modal to show.

Jeff Gardner
  • 301
  • 1
  • 2
  • 7