AngularJS/Bootstrap - 选择行并使用按钮以模式打开详细信息

Question

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

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

这是我的JS Fiddle。

这里是点击函数的代码sn-p：

$scope.selectedRow = null;

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

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

这是我的表格和模态调用点击函数的代码：

<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，您使用的是没有 angular 指令的 jQuery 版本，这样做会让您的生活更加艰难。如果您打算对此做更多事情或制作更多模态，我建议您切换。

您仍然可以完成这项工作。

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

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

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