2015-11-30 3 views
0

Итак, я хочу показать загрузочный модальный, если триггер свойства является ложным, как показано в приведенном ниже коде. В принципе, если привилегия, выбранная в вышеуказанном элементе управления, имеет свойство hasFunds как false, то показывается модальный, как только это преимущество будет выбрано (покажет этот код внизу), но если это правда, ничего не происходит с модальным.Angular Bootstrap ng-show 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 --> 

Контроль выше которого имеет селектор выпадающий, который содержит свойство, которое приводит в действие истинным или ложным:

<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> 

В настоящее время нет модальное не показывает ли истинным или ложным , Невозможно ли модальное быть вызванным из ng-show?

Большое спасибо.

+0

Вы спрашиваете, как сделать элемент видимым, если какое-то выражение оценивается как false? – Ahmed

+0

Также вы используете https://angular-ui.github.io/bootstrap/#/modal? Если это так, ваша реализация отключена, вы можете вернуться к этой ссылке. ng-show просто делает видимым или не видимым конкретный элемент, когда выполняется выражение. В случае модальности bootstrap требуется больше вещей, чем просто сделать что-то видимое и невидимое. – flybear

+0

У меня была такая же проблема, как и у вас, в итоге я получил совет от ответа и просто поместил шаблон HTML в свой основной HTML, используя bootstrap css для его дизайна. Затем просто разместите его в div и используйте свое ng-show, как вы знаете, как: D Вы, вероятно, уже видели его, но он работает достаточно хорошо: https://stackoverflow.com/questions/33525361/angularjs-possible-to- нг-шоу-нг-прятки амодальное окно – xeon48

ответ

0

Если вы используете UI Bootstrap, см документации для директивы модальной: https://angular-ui.github.io/bootstrap/#/modal

Вы должны вызвать $uibModal.open() с необязательным аргументом от контроллера для того, чтобы показать модальное.