如何将HTML表格的rec.sys_id变量传递到Form-Modal方法中？

问题分析 #

原代码中，模态框#formUserRecord不在ng-repeat的作用域内，直接访问rec.sys_id会失效，且按钮里的<rec.sys_id>是语法错误。下面提供两种可行的解决方法：

方案一：通过控制器变量中转参数 #

1. 修改表格链接，点击时保存当前记录到控制器

<table>
    <tr ng-repeat="rec in myController.userRecord">
     <td>
       <a href="" 
          ng-click="myController.selectedRecord = rec" 
          data-toggle="modal" 
          data-target="#formUserRecord">
         Click Here
       </a>
     </td>
     <td>{{rec.sys_id}}</td>
    </tr>
 </table>

2. 模态框按钮直接调用控制器中保存的参数

<div class="modal fade" id="formUserRecord" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>Check your Workday Record:</p>
                <button type="button" 
                        ng-click="myController.displayUserRecord(myController.selectedRecord.sys_id)">
                  Click here
                </button>
            </div>
        </div>
    </div>
</div>

原理：点击链接时，将当前循环的rec对象赋值给控制器的selectedRecord属性，模态框属于控制器作用域，可直接访问该属性的sys_id。

方案二：完全用Angular控制模态框（推荐） #

避免Bootstrap原生data-toggle的作用域冲突，直接通过Angular方法传递参数并控制模态框显示。

1. 控制器添加模态框控制逻辑

// 控制器内代码
this.showModal = false;
this.targetSysId = '';

// 打开模态框并传入sys_id
this.openModal = function(sysId) {
    this.targetSysId = sysId;
    this.showModal = true;
};

// 关闭模态框
this.closeModal = function() {
    this.showModal = false;
};

// 你的业务方法
this.displayUserRecord = function(sysId) {
    // 处理逻辑
    console.log('当前选中的sys_id:', sysId);
};

2. 修改HTML结构

<table>
    <tr ng-repeat="rec in myController.userRecord">
     <td>
       <a href="" ng-click="myController.openModal(rec.sys_id)">
         Click Here
       </a>
     </td>
     <td>{{rec.sys_id}}</td>
    </tr>
 </table>

<!-- 用Angular的ng-show控制模态框显示 -->
<div class="modal fade in" 
     id="formUserRecord" 
     tabindex="-1" 
     role="dialog" 
     ng-show="myController.showModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>Check your Workday Record:</p>
                <button type="button" 
                        ng-click="myController.displayUserRecord(myController.targetSysId); myController.closeModal()">
                  Click here
                </button>
                <button type="button" 
                        class="ml-2" 
                        ng-click="myController.closeModal()">
                  关闭
                </button>
            </div>
        </div>
    </div>
</div>

优势：全程由Angular管理模态框状态，参数传递更直接，避免原生Bootstrap组件与Angular作用域的兼容性问题。

内容的提问来源于stack exchange，提问作者Pururava