Question

这是一个奇怪的问题，我什至不知道如何正确地称呼这个问题。

我的应用列出了多个事件。有些事件要求用户确认“放弃”表格。需要弃权表格的事件有一个按钮“签署弃权表格”。在所有需要弃权表格的事件上，弃权表格按钮都会启动一个模式，并且在该模式中有一个复选框，用于确认弃权表格...当用户选中该复选框时，它将激活“立即接受”按钮。

在第一个事件中，用户进入复选框将激活“立即接受”按钮。但是，如果用户退出模式（无论是否实际单击“立即接受”按钮）并返回同一事件模式，或者退出并转到另一个事件模式，则单击复选框失败，无法激活“立即接受”按钮。用户必须离开应用程序，然后再次进入。它仅适用于第一个模态-一次-然后将不适用于相同的模态或此后的任何其他模态。

出现以下模式：

  <script id="waiverModal.html" type="text/ng-template">
    <ion-modal-view class="modalCenter">
      <ion-header-bar align-title="center" style="text-align:center;">
        <span style="color:#4e8cf9;text-align:center;">{{club.clubInfo.clSiteName}} LIABILITY/WAIVER FORM
        <br>Event Requires Accepting The Waiver</span>
      </ion-header-bar>
      <ion-content ng-init="fileLoaded=0" style="top:25px;padding-top:5px;">
        <div style="position:absolute;top:0px;left:0px;width:100%;height:100% z-index:1000;background-color:rgba(0,0,0,0.5);" ng-if="fileLoaded==0">
          <div style="text-align:center;margin-top:100px;">
              <div style="background-color:#387ef5;color:white;width:100%;border-radius:10px;">Loading file...</div>
              <div><img style="height:100px;" ng-src="img/ajax_loading.gif"></div>
          </div>
        </div> 
        <!-- ng-model="waiverBox" ng-model="waiverForm" -->
        <div style="padding:5px;font-size:12px;margin-top:25px;"><pre ng-include src="club.ceFormPath" onload="fileLoaded=1"></pre></div>
        <div style="margin:15px;"><input type="checkbox" style="width:30px;height:30px;" id="waiverBox_{{club.ceID}}" ng-click="doWaiver({{club.ceID}})" /> I have read the Liability/Waiver form</div>
        <div id="" class="item" style="font-size:12px;margin:5px;text-align:left;white-space:normal;">
          <div>By clicking "ACCEPT TERMS" you are agreeing to contents of this liability/waiver form</div>
          <button  id="waiverForm_{{club.ceID}}" style="line-height:5px;min-height:20px;font-weight:bolder ;" type="button" class="button button-small button-modalCustom" disabled ng-click="closeWaiver(2)">ACCEPT TERMS</button>
          <button style="margin-left:25px;line-height:5px;min-height:20px;font-weight:bolder ;" type="button" class="button button-small button-modalCustom button-customColor" ng-click="closeWaiver(1)">CLOSE</button>
        </div>
      </ion-content>
    </ion-modal-view>
  </script>

以及激活“立即接受”按钮的控制器功能：

  $scope.doWaiver = function(id) {
    var elBox = document.getElementById('waiverBox_'+id) ;
    var elForm = document.getElementById('waiverForm_'+id)
    if (elBox.checked == true) {
      elForm.disabled = false ;
      elForm.style.backgroundColor = "#387ef5" ;
      elForm.style.color = "white" ;
    } else {
      elForm.disabled = true ;
      elForm.style.backgroundColor = "white" ;
      elForm.style.color = "#387ef5" ;
    }
  }

在我的生命中，我无法弄清楚它为什么能一次运行...然后直到用户关闭该应用程序并再次返回时才再次运行。

在进一步的故障排除中，我发现在第一个复选框/取消复选框，相同的复选框或任何其他模式复选框之后，无论其处于选中状态还是未选中状态，都注册为“ true”。

更新：我向复选框和按钮都添加了一个ng模型。 ng-model='waiverBox_[club.ceID]'和ng-model='waiverForm_[club.ceID]'，然后还添加了一些其他的模式关闭代码。现在它可以更好地工作了，但是在返回到模式时，未选中该复选框，该按钮处于不活动状态，当我单击该复选框时，什么也没有发生……甚至没有更改/单击事件功能。然后，我取消选中该框，它会触发，再次选中该框，一切正常。但是，为什么复选框的第一个复选框不起作用？

  $scope.closeWaiver = function(type,id) {
    var elBox = document.getElementById('waiverBox_'+id) ;
    var elForm = document.getElementById('waiverForm_'+id) ;
    elBox.checked = false ;
    elForm.disabled = true ;
    $scope["waiverBox_" +id] = false ;
    elForm.style.backgroundColor = "white" ;
    elForm.style.color = "#387ef5" ;    
    if (type == 1) {
      $scope.closeModal() ;
    } else if (type == 2) {
      clubService.getWaiver($scope.club.cID,$scope.club.ceID,$scope.club.ceLiability)
      .then(function(response) {
        if (response[0].success == true) {
          // waiver form accepted
          $scope.closeModal() ;
          $scope.club.ceForm = 1 ;
          $rootScope.refreshClubs = 1 ;
          alert(response[0].msg);
          $scope.$applyAsync(function() {
            $state.go("tab.clubs",null,{reload:true});  
          });
        }
      }) ; 
    }
  }

科尔多瓦离子按钮无法在多种模式下使用

0 个答案: