使用复选框根据用户选择在模态屏幕上显示数据

Question

“我在导航选项卡中显示了20 记录，并针对每条记录添加了复选框列。我的要求是用户是否使用复选框选择记录（行）1、4、8 并单击“编辑”导航选项卡顶部的按钮，然后它应该显示在Modal 屏幕上，以便用户可以编辑它。

如果他/她选择记录5, 8, 6，则记录应按特定顺序显示。

我用谷歌搜索，但找不到任何相关帖子。

下面是我的 HTML 代码：

<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid">

    <div class="input-group">
        <ul class="nav nav-tabs">
            <li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li>
        </ul>

        <table class="table">
            <thead>
                <tr>

                    <th>
                        <a href="#">Select</a>
                    </th>
                    <th>
                        <a href="#" ng-click="SortBy = 'Test1'; Reverse = !Reverse;">Test1</a>
                    </th>
                    <th>
                        <a href="#" ng-click="SortBy = 'Test2'; Reverse = !Reverse;">Test2</a>
                    </th>
                    <th>
                        <a href="#" ng-click="SortBy = 'Test3'; Reverse = !Reverse;">Test3</a>
                    </th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in Records | orderBy:SortBy:Reverse ">



                    <td>
                        <input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" />
                    </td>

                    <td>{{ record.Test1  }}</td>
                    <td>{{ record.Test2 }}</td>
                    <td>{{ record.Test3 }}</td>
                 </tr>
            </tbody>
        </table>
    </div>

以下是我用于填充导航选项卡的AngularJs 代码

  $http.get(pageBaseUrl + "api/records").success(function (records) {
        $scope.Records = records;
        $scope.IsLoading = false;
    });

下面是Button和Modal界面的代码：

 <div class="input-group">
                    <button type="button" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                        Edit Multiple Records
                    </button>
                </div>

    <div id="editRecords" class="modal" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h2>Edit Data For Selected Records </h2>
                </div>
                <div class="modal-body">
                    <table class="table-condensed table-striped">
                        <thead>
                            <tr>
                                <th>Test 1</th>
                                <th>Test 2</th>
                                <th>Test 3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="record in Records | orderBy:SortBy:Reverse">
                                <td><input type="text" class="form-control input-sm" /></td>
                                <td><input type="text" class="form-control input-sm" /></td>
                                <td><input type="text" class="form-control input-sm" /></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" ng-click="SaveRecords();">Save Records</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="UnmarkForEdition()">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

Answer 1

感谢代码，这是我的解决方案，

JSFiddle Demo

问题：

首先，我使用代码检查对象是否包含任何选中的复选框。

$scope.checkCheckbox = function(){
    return $filter('filter')($scope.Records, {Selected: true}).length === 0; 
 }

在上面的代码中，我检查ng-repeat 数组是否有任何包含属性Selected:true 的对象，如果没有，那么长度将为零，使用比较器运算符，我返回一个布尔值。这由 HTML 元素 button 属性 ng-disabled 使用并禁用输入。

 <button type="button" ng-disabled="checkCheckbox()" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
              <span class="glyphicon glyphicon-floppy-disk"></span>
              Edit Multiple Records
            </button>

当edit multiple records, button is clicked, I open the modal, and in the code I have added a simpleng-if` 将仅显示选中复选框的输入时！

<tr ng-if="record.Selected" ng-repeat="record in Records | orderBy:SortBy:Reverse">
                                <td><input type="text" class="form-control input-sm" /></td>
                                <td><input type="text" class="form-control input-sm" /></td>
                                <td><input type="text" class="form-control input-sm" /></td>
                            </tr>

如果这能解决问题，请告诉我。