Question

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

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

这是我的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);
};

以下是调用click函数的表和模态的代码：

<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版本，这样做会让自己的生活变得更加困难。如果你要做更多的事情或制作更多的模态，我建议切换。

你仍然可以做这项工作。

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

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

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

AngularJS / Bootstrap - 使用按钮在模态中选择行和打开详细信息

1 个答案: