如何在模型對話框中獲取選中的復選框行數據？

Question

當我選擇任何復選框時，在模型對話框中應該僅顯示選定的行數據時出現問題。

1. 但是我的情況是當我點擊處理（稱為模型對話框）時，所有來的數據都會被我選擇還是不選擇。
2. 但是，單擊“保存數據”按鈕（在模型內部）后，數據將正確顯示我所選擇的內容。
3. 但是我必須先顯示數據，然后再單擊“保存數據”按鈕。

HTML代碼

<div class="row">
            <div class="col-md-12">
                <h1>OMR Duplicate Students List</h1>
                <table id="example" class="table">
                    <tr>
                        <th><input type="checkbox" ng-click="vm.selectAll()"
                        /></th>
                        <th>Name</th>
                        <th>Mobile</th>
                    </tr>
                    <tr ng-repeat="data in vm.data">
                        <td><input type="checkbox" ng-model="data.selected"class="duplicateRow" /></td>
                        <td>{{data.name}}</td>
                        <td>{{data.mobileNumber}}</td>
                    </tr>
                    <tr>
                    <tr>
                    <button type ="submit" class="button pull-right"  data-toggle="modal" data-target="#myModal">Process</button>
                    </tr>
                </table>
                    <table class="table">
                        <tr>
                            <td colspan="4">
                                <pagination page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
                            </td>
                        </tr>
                    </table>
           </div>
        </div>
        <div id="myModal" class="modal fade">
    <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">These Recods You are Selected</h4>
            </div>
            <div class="modal-body">
                <div class="row">
            <div class="col-md-12">
                <!-- <div ng-if="data.selected === 'true'"> -->
                <table id="example" class="table">
                    <tr>

                        <th>Name</th>
                        <th>Mobile</th>
                    </tr>
                    <tr ng-repeat="x in vm.data">
                        <td>{{x.name}}</td>
                        <td>{{x.mobileNumber}}</td>
                    </tr>


                </table>
                <!-- </div> -->

           </div>
        </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" ng-click="vm.process()">Save Data</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

Java腳本代碼

  function StudentDuplicateAccountController($scope, ApiService, $routeParams, $http, $location, $timeout) {
            var vm = this;
            var page = $routeParams.page || 1;
             vm.data = [];


            vm.selectAll =function(){
              angular.forEach(vm.data, function(data){
                if (data.selected) {
                  data.selected = false;
                } else {
                  data.selected=true;
                }
              });
            }


            vm.selectedUsers = [];


            vm.process = function() {
              vm.selectedUsers.splice(0, vm.selectedUsers.length);
              vm.data.forEach(function(studentData){
                if(studentData.selected) {
                    vm.selectedUsers.push(studentData);
                }
              })
                console.log("selectedUsers:::::::::"+JSON.stringify(vm.selectedUsers))
              if (vm.selectedUsers.length === 0) {
                  toastr.info('Selected atleast one record.', null, {
                          timeOut: 3000
                  })
                  return;
              } else {
                ApiService.save()
// some code
              }
            }

Answer 1

將您的模式HTML更改為

   <tr ng-repeat="x in vm.data" ng-if="x.selected">
                        <td>{{x.name}}</td>
                        <td>{{x.mobileNumber}}</td>
                    </tr>

禁用過程按鈕

創建一個像

vm.isContainsSelected = function(){
return vm.data.some(function(d){return d.selected})
}

然后在處理按鈕上

 <button ng-disabled="!vm.isContainsSelected()" >proceess</button>