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

Question

"I've displayed 20 records in navigation tab and against each records I've added coloumn for checkbox. My requirement is if user selects records (row) 1, 4, 8 using checkbox and click on "导航选项卡顶部的“编辑”按钮，然后它应该显示在 Modal 屏幕上，以便用户可以编辑它。

如果 he/she 选择记录 5, 8, 6 则记录应按该特定顺序显示。

我google它但是找不到任何相关的帖子。

下面是我的 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，如果有none，那么长度将为零，使用比较运算符，我 return 一个布尔值。这由 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>

让我知道这是否解决了问题。

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

Display Data On Modal Screen Based On User Selection Using Check Box

checkbox

angularjs-ng-repeat