ng-click（参数）打开一个弹出窗口，下拉菜单，然后选择项目和参数发送到服务

Question

我是Angular-js的新手。我使用的JSP的前端，并从UI将值传递给controller.Now我需要打开一个新的弹出列表，用户可以选择一个选项，然后通过所有参数的服务..

ng-click="rewardRetry(singleWinner)" 

控制器 - - >

$scope.retryRewardDTO = { 
    "mobile_number" : null, 
    "draw_id" : 0, 
    "lottery_ticket_id" : 0, 
    "prize" : 0, 
    "reward_method" :null 
}; 

（MOBILE_NUMBER，draw_id，lottery_ticket_id，奖）我可以将这样的

$scope.rewardRetry = rewardRetry; 
function rewardRetry(rewardRetryDTO) {      
    $scope.retryRewardDTO.draw_id=rewardRetryDTO.draw_id; 
    $scope.retryRewardDTO.lottery_ticket_id=rewardRetryDTO.lottery_ticket_id; 
    $scope.retryRewardDTO.prize=rewardRetryDTO.prize; 
    $scope.retryRewardDTO.mobile_number=rewardRetryDTO.mobile_number; 
    //$scope.retryRewardDTO.reward_method=rewardRetryDTO.reward_method; 
} 

但在这里retryRewardDTO.reward_method - >用户应该在弹出的选项中选择。 （钱包，m_cash，重装,,, ....等）

打电话到服务

winnerService.winnerService.rewardRetry(
    $scope.retryRewardDTO, 
    function(data, headers) { 
    winnerSearch(); 
    }, function() { 
}); 

我试图做类似下面link.but不能得到适当的输出。请一些帮助我......

访问：AngularJS Modal Popup

Answer 1

最后我找到了答案，并在这里实现新rewardService

$scope.rewardRetry = rewardRetry; 
         function rewardRetry(rewardRetryDTO) { 
         $scope.retryRewardDTO.draw_id=rewardRetryDTO.draw_id; 
         $scope.retryRewardDTO.lottery_ticket_id=rewardRetryDTO.lottery_ticket_id; 
         $scope.retryRewardDTO.prize=rewardRetryDTO.prize; 
         $scope.retryRewardDTO.mobile_number=rewardRetryDTO.mobile_number; 
         //$scope.retryRewardDTO.reward_method=rewardRetryDTO.reward_method; 
         var modalOptions = { 


               bodyText : 'Are you sure you want to retry '+$scope.retryRewardDTO.prize+'/= reward for 0'+ $scope.retryRewardDTO.mobile_number+' ? Please select a reward method first and confirm' 

             }; 


         rewardService.showModal({}, modalOptions).then(
             function(result) { 
         $scope.retryRewardDTO.reward_method = result; 
             $('#retry-'+rewardRetryDTO.draw_id+'-'+rewardRetryDTO.lottery_ticket_id).hide(); 
          $timeout(function() { 
           winnerService.winnerService.rewardRetry(
               $scope.retryRewardDTO, 
               function(data, headers) { 
               winnerSearch(); 
               }, function() { 
               }); 
          }); 
          }); 
         } 
         ; 

我reward_option.jsp文件

<%@ taglib prefix="sec" 
    uri="http://www.springframework.org/security/tags"%> 
<div class="option"> 
    <div class="pull-right"></div> 
    <div>Copyright &copy; Lucky889 2016</div> 
    <input type="hidden" value="<sec:authentication property="principal.userType" />" id="user_type" /> 
    <input type="hidden" value="<sec:authentication property="principal.operator" />" id="user_operator" /> 
</div> 

<script type="text/ng-template" id="rewardModalContent.html"> 
<div class="modal-header"> 
    <h3>{{modalOptions.headerText}}</h3> 
</div> 
<div class="modal-body"> 
    <p>{{modalOptions.bodyText}}</p> 


         <div class="modal-body"> 

         <%-- <p ng-repeat="(key,singleReward) in modalOptions.rewardList">{{key}}----{{singleReward}}</p> --%> 

          <div class="form-group"> 
           <label class="control-label" for="reward">Reward 
           Method</label><select name="reward" id="reward" 
            ng-model="reward_method" class="form-control"> 
            <option ng-repeat="(key,singleReward) in modalOptions.rewardList" 
             value="{{key}}">{{singleReward}}</option> 
           </select> 

          </div> 
         </div> 

    <div class="modal-footer"> 
    <button class="btn btn-primary" 
       data-ng-click="modalOptions.confirm(reward_method)">{{modalOptions.actionButtonText}}</button> 
    <button type="button" class="btn" 
      data-ng-click="modalOptions.cancel()">{{modalOptions.closeButtonText}}</button> 

    </div> 

</script> 

这里是我的rewardService

angular.module("zmessengerRewardApp.service", []).service(
     'rewardService', 
     function(toastr, $uibModal, $log) { 

      var showHeaderErrorMessage = function(header) { 
       toastr.clear(); 
       toastr.error(header['lms-message'], 
         header['lms-root-cause-message']); 
      }; 

      var showHeaderSuccessMessage = function(header) { 
       toastr.clear(); 
       toastr.success(header['lms-message'], 
         header['lms-root-cause-message']); 
      }; 




      var modalDefaults = { 
       backdrop : true, 
       keyboard : true, 
       modalFade : true, 
       templateUrl : 'rewardModalContent.html' 
      }; 

      var modalOptions = { 
       closeButtonText : 'Cancel', 
       actionButtonText : 'Confirm', 
       headerText : 'Confirmation', 
       bodyText : 'Perform this action?', 
       rewardList : {reload:'Auto Reload',manual_reload:'Manual Reload',ez_cash:'Ezcash',mcash:'MCash',wallet:'Wallet',bank:'Bank Transfer'} 



      }; 

      function showModal(customModalDefaults, customModalOptions) { 
       if (!customModalDefaults) 
        customModalDefaults = {}; 
       customModalDefaults.backdrop = 'static'; 
       return show(customModalDefaults, customModalOptions); 
      }; 

      function show(customModalDefaults, customModalOptions) { 
       // Create temp objects to work with since we're in a singleton 
       // service 
       var tempModalDefaults = {}; 
       var tempModalOptions = {}; 

       // Map angular-ui modal custom defaults to modal defaults 
       // defined in service 
       angular.extend(tempModalDefaults, modalDefaults, 
         customModalDefaults); 

       // Map modal.html $scope custom properties to defaults defined 
       // in service 
       angular.extend(tempModalOptions, modalOptions, 
         customModalOptions); 

       if (!tempModalDefaults.controller) { 
        tempModalDefaults.controller = function($scope, 
          $uibModalInstance) { 
         $scope.modalOptions = tempModalOptions; 
         $scope.modalOptions.confirm = function(result) { 
          $uibModalInstance.close(result); 
         }; 

         $scope.modalOptions.cancel = function(result) { 
          $uibModalInstance.dismiss('cancel'); 
         }; 

        } 
       } 

       return $uibModal.open(tempModalDefaults).result; 
      }; 



      return { 

       showHeaderErrorMessage : showHeaderErrorMessage, 
       showHeaderSuccessMessage : showHeaderSuccessMessage, 
       showModal : showModal, 

      }; 

     });