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

Question

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

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

这是我的JS小提琴。

以下是click函数的代码段：

$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引导，您使用的是没有angular指令的jQuery版本，这样做会让您的生活更加困难。如果你想用这个做更多的事情，或者做更多的情态动词，我建议切换。

不过，你仍然可以做到这一点。

不要在点击行（$index）中传递$index，而是传递应用程序本身，并将其分配给scope属性。它是在ng repeat循环中创建的变量，可以由循环中的其他表达式访问。

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

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