Question

背景：

因此，我正在使用模式框来搜索数据库中使用表单来缩小结果范围的任务条目列表。在此模式框中，有一个自定义单选按钮，用于选择任务是否正在进行（简单的“是”或“否”选项）。目的是在调用模态时将“否”选项设置为默认值。目前，我正在使用data-ng-init;但是，这仅在第一次打开模态时有效。如果用户关闭模态并重新打开它，则不再设置默认值。以下是此自定义按钮的外观示例：

<div class="col-sm-6">
      <div style="margin-bottom:10px">
      <button type="button" data-ng-init="tr.taskInProgress('No')" 
          title="Task In Progress: No" data-ng-click="tr.taskInProgress('No')"
          style="border:0;background:transparent">
      <img src="../images/selected.png" data-ng-switch-when="No" />
      <img src="../images/Deselect.png" data-ng-switch-when="Yes"  />
      <img data-ng-switch-when="" src="/nc/images/Deselect.png" /></button>
          <text>No
   </div>
   (another similar button, but for 'yes')
</div>

在随附的.js文件中，以下内容用于帮助填充此模式：

/*--------- Get Tasks ---------*/
tr.closeGetTaskModal = closeGetTasModal;
tr.displayGetTaskMessage = true;
tr.selectedStatusType = getStatusType;
tr.trackingId = '';
tr.performGetTask = performGetTask;
tr.isTaskInProgess = isTaskInProgress;

并且，在同一个.js文件中，以下函数用于修改无线电：

function isTaskInProgress(newValue) {
    tr.isTaskInProgress = newValue;
}

我一直在研究其他人如何处理此类情况的迭代，但是我很不幸，没有找到与我正在使用的方法相似的东西。我尝试通过修改Get Tasks在isTaskInProgress('No')部分中设置默认值，但这仅锁定了模式，而我无法修改该选项。我尝试在isTaskInProgress函数中设置默认值；但是，这仅在单击按钮时有效，无法设置默认值。我尝试查看data-ng-default是否可以工作；但是，这似乎不是公认的参数。有没有人建议如何修改它以获得期望的结果？预先感谢大家的帮助

Answer 1

小免责声明

我冒昧地假设您正在使用UI Bootstrap（因为我在示例HTML中看到了bootstrap类），因此在我的示例中将使用Uib Modal。

Bootstrap Modal文档：https://angular-ui.github.io/bootstrap/#!#modal

解析器/回调解决方案

您很可能希望使用控制器来设置您的 tr.isTaskInProgress 标志，而不是使用 ng-init 指令（灵活性/可读性更高）。

在目标控制器功能的顶部，将 tr.isTaskInProgress 设置为 false ，然后将其值作为“模态解析对象”中的属性传递给模态。

Bootstrap对解析对象的解释：https://angular-ui.github.io/bootstrap/#!#ui-router-resolves

代码

function MainController($scope, $uibModal) {
    let vm = this;
    vm.isTaskInProgress = false;

    // When you open the modal, pass in the isTaskProgress value
    let modalInstance = $uibModal.open({
         templateUrl: 'myModalContent.html', // Points to the script template
         controller: 'ModalController', // Points to the controller
         controllerAs: 'mc',
         windowClass: 'app-modal-window',
         backdrop: 'static',
         resolve: {
              isTaskInProgress: function() {
                   // pass the task state to the Modal
                   return vm.isTaskInProgress;
              }
         }
     });

  // handle the value(s) passed back from the modal
  modalInstance.result.then(returnedTaskState => {
    // reassign the returned value of the modal
    if (returnedTaskState !== null) {
      vm.isTaskInProgress = returnedTaskState;
    }
  });
}

工作示例

https://plnkr.co/ryK7rG

为了节省时间，我从代码片段中更改了一些变量/方法名称。在示例中，您可以...

在打开模式之前，先设置进行中值，然后该模式将反映“进行中”值。
更改模态内的进行中值。关闭模态后，该值将在主页上更新。

SO片段

我意识到SO Snippet窗口并不是本示例的最佳选择，只是在这里扔了我的示例代码，以防万一Plunker由于某种原因不方便。

(function() {
  "use strict";

  let app = angular
    .module("myApp", ["ui.bootstrap"])
    .controller("MainController", MainController);

  MainController.$inject = ["$scope", "$timeout", "$uibModal"];

  function MainController($scope, $timeout, $uibModal) {
    /**
     * John Papa Style Guide
     * https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
     * */
    let vm = this;

    // ==== scoped variables ====
    vm.title = "AngularJS - Passing Toggled Values to a Modal"
    vm.taskInProgress = false;
    vm.taskButtonLocked = false;

    // ==== functions hoist ====
    vm.beginTask = _beginTask;

    function _beginTask() {
      vm.modalIsOpen = true;

      // do work

      openModal();
    }

    // ==== local functions ====
    function openModal() {
      // open the modal with configurations
      let modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html', // Points to my script template
        controller: 'ModalController', // Points to my controller
        controllerAs: 'mc',
        windowClass: 'app-modal-window',
        backdrop: 'static',
        resolve: {
          taskInProgress: function() {
            // pass the task state to the Modal
            return vm.taskInProgress;
          }
        }
      });

      // handle the value(s) passed back from the modal
      modalInstance.result.then(returnedTaskState => {
        // reset control values after modal is closed
        vm.taskButtonLocked = false;
        vm.modalIsOpen = false;

        // reassign the returned value of the modal
        console.log("returnedTaskState: ", returnedTaskState);

        if (returnedTaskState !== null) {
          vm.taskInProgress = returnedTaskState;
        }
      });
    }
  }

})();

(function() {
  'use strict';

  angular
    .module('myApp')
    .controller('ModalController', ModalController);

  ModalController.$inject = ['$scope', '$timeout', '$uibModalInstance', 'taskInProgress'];

  function ModalController($scope, $timeout, $uibModalInstance, taskInProgress) {

    // Assign Cats to a Modal Controller variable
    let vm = this;
    
    vm.inProgress = taskInProgress;
    
    console.log("taskInProgress", taskInProgress)

    $scope.submit = function() {
      $uibModalInstance.close(vm.inProgress);
    }

    $scope.close = function() {
      $uibModalInstance.close(null);
    }
  }
})();

input[type="radio"]:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunk</title>

  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <!-- JQuery and Bootstrap -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Angular Stuff -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
  
   <!-- UI Bootstrap Stuff -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

  <!-- Our Angularjs App -->
  <script type="text/javascript" src="app.js"></script>
</head>

<body ng-app="myApp" ng-controller="MainController as tr">

  <!-- ==== MAIN APP HTML ==== -->
  <div class="container" style="padding:1em;">
    <div class="row">
      <div class="col-xs-12">
        <div class="jumbotron text-center">
          <h2>{{ tr.title }}</h2>
          <h4><em><a href="https://stackoverflow.com/questions/55362380/how-to-set-default-value-of-custom-radio-button-in-a-modal" target="_blank">SO Question #55362380</a></em></h4>
          <h4><em><a href="https://angularjs.org/" target="_blank">AngularJS - v1.7.8</a></em></h4>
        </div>
      </div>
      <div class="col-xs-12">
        <form>
          <div class="form-group">
            <h3>Task In Progress</h3>
            <div>
              <label>Yes:</label>
              <input type="radio"
                     ng-checked="tr.taskInProgress"
                     ng-click="tr.taskInProgress = true"
                     ng-disabled="tr.modalIsOpen">
            </div>
            <label>No:</label>
            <input type="radio" 
                   ng-checked="!tr.taskInProgress"
                   ng-click="tr.taskInProgress = false" 
                   ng-disabled="tr.modalIsOpen">
          </div>
          <div class="form-group">
            <label>Open the modal:</label>
            <button type="button" 
                    class="btn btn-success" 
                    ng-click="tr.beginTask();" 
                    ng-disabled="tr.taskButtonLocked">
              <span>Begin Task</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <!-- ==== MODAL HTML TEMPLATE ==== -->
   <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <form>
          <div class="form-group">
            <label>Task State:</label>
            <div style="padding:1em;background:rgba(200, 214, 229,0.3);">
              <p>
                <span ng-show="!mc.inProgress">
                  <span>Task is not in progress...&nbsp;&nbsp;</span>
                  <i class="fa fa-check-square" aria-hidden="true"></i>
                </span>
                <span ng-show="mc.inProgress">
                  <span>Task is in progress...&nbsp;&nbsp;</span>
                  <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                </span>
              </p>
            </div>
          </div>
          <div class="form-group" style="padding-top:1em;">
            <h3>Task In Progress</h3>
            <div>
              <label>Yes:</label>
              <input type="radio"
                     ng-checked="mc.inProgress"
                     ng-click="mc.inProgress = true">
            </div>
            <label>No:</label>
            <input type="radio" 
                   ng-checked="!mc.inProgress"
                   ng-click="mc.inProgress = false">
          </div>
        </form>
      </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="submit()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>
    </div>
  </script>

</body>

</html>

如何在模式

1 个答案:

小免责声明

解析器/回调解决方案

代码

工作示例

SO片段