AngularJS/Bootstrap - Select 行并在带按钮的模态中打开详细信息

Question

我正在使用 AngularJS、Bootstrap 和数据切换来打开模式。我想单击 table 中的一行，获取索引号并存储它，然后单击一个按钮打开一个模式，使用存储的索引显示该行的更多详细信息。

我的代码现在可以获得被点击行的索引，我的按钮会打开一个模式，但它们没有连接，因此按钮会获取行索引并在模式中显示这些详细信息。我的模式显示所有行数据而不是单击行的详细信息。如何将单击的行连接到按钮以及如何让我的模式显示一个应用程序而不是所有应用程序的详细信息？任何帮助将不胜感激！

这是我的 JS Fiddle.

点击函数的代码片段如下：

$scope.selectedRow = null;

$scope.clickRow = function(index) {
    $scope.selectedRow = index;
    console.log(index);
};

$scope.getDetails = function(index) {
    $scope.selectedRow = index;
    console.log(index);
};

这里是我的 table 和调用点击功能的模式的代码：

<div id="tableDiv">
    <table id="myTable" class="table display">
        <thead>
            <tr>
                <th ng-repeat="(i, th) in head" value="{{th.id}}" class="{{th.class}}"><span>{{th.name}}</span></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="app in apps | filter:search" ng-click="clickRow($index)" ng-class="{selected: $index === selectedRow}">
                <td>{{app.appName}}</td>
                <td>{{app.dateCreated}}</td>
                <td>{{app.dateUpdated}}</td>
                <td>{{app.payload}}</td>
                <td>{{app.status.name}}</td>
                <td>{{app.errorCode.name}}</td>
                <td>{{app.errorDesc}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th ng-repeat="(i, th) in head" value="{{th.id}}"><span>{{th.name}}</span></th>
            </tr>
        </tfoot>
    </table>
</div>

<div id="details">
    <button class="btn btn-default" data-toggle="modal" data-target="#myModal" ng-click="getDetails($index)">Launch</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Details</h4>
                </div>
                <div class="modal-body">
                    <table class="table display">
                        <thead>
                            <tr>
                                <th ng-repeat="(i, th) in details" value="{{th.id}}"
                                    class="{{th.class}}"><span>{{th.name}}</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="app in apps">
                                <td>{{app.appName}}</td>
                                <td>{{app.errorDesc}}</td>
                                <td>{{app.recordCount}}</td>
                                <td>{{app.recordFail}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

首先我要指出的是你实际上并没有使用 angular-ui-bootstrap，你使用的是 jQuery 版本没有 angular 指令，这样做会让自己的生活更加艰难。如果你打算用这个做更多或制作更多模态，我建议切换。

不过你仍然可以完成这项工作。

不是在 clickRow($index) 中传递 $index，而是传递 app 本身 clickRow(app) 并将其分配给您的范围属性。它是在您的 ng-repeat 循环中创建的一个变量，可以被循环中的其他表达式访问。

$scope.clickRow = function(app) {
  $scope.selectedApp = app
};

然后，在您的模式 html 中，您可以绑定到 selectedApp 的属性。它应该只显示该应用程序的数据。

AngularJS/Bootstrap - Select 行并在带按钮的模态中打开详细信息

AngularJS/Bootstrap - Select row and open details in modal with button

angularjs

angular-ui-bootstrap

bootstrap-modal