如何在模型对话框中获取选中的复选框行数据？

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>