Question

“我在导航标签中显示了20个记录，并针对每个我添加了coloumn for checkbox的记录。我的要求是用户使用复选框选择记录（行）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;
    });

以下是按钮和模态屏幕的代码：

 <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 simple ng-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>

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

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

1 个答案: