如何在模式中设置自定义单选按钮的默认值

Question

背景：

所以我正在使用模式框来搜索数据库中的任务条目列表，使用表单来缩小结果范围。在此模式框中，有一个自定义单选按钮，用于选择任务是否正在进行（简单的 "Yes" 或 "No" 选项）。目标是在调用模态时将 "No" 选项设置为默认值。目前，我正在使用 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文件中，以下函数用于修改radio：

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

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

Answer 1

小免责声明

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

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

解析器/回调解决方案

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

在目标控制器函数的顶部将 tr.isTaskInProgress 设置为 false，然后将其值传递给模态作为属性在 "Modal Resolve Object".

Bootstrap对Resolve Object的解释：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 代码段 window 并不是这个示例的最佳位置，但只是将我的示例代码扔在这里以防 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="" 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>

如何在模式中设置自定义单选按钮的默认值

How to set default value of custom radio button in a modal

modal-dialog

default-value

angularjs

小免责声明

解析器/回调解决方案

代码

工作示例

SO 片段