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

时间:2017-10-05 08:35:49

标签: javascript angularjs html5 checkbox modal-dialog

当我选择任何复选框时,我有问题,只有选定的行数据应在模型对话框中可见。

  1. 但是我的情况是,当我点击进程(调用模型对话框)时,我要选择的所有数据都会选择。
  2. 但是点击了保存数据按钮(在模型内部)后,数据正​​在按照我选择的方式进行。
  3. 但是我必须在点击保存数据按钮之前显示数据。
  4.   

    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
                  }
                }
    

1 个答案:

答案 0 :(得分:2)

将您的模态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>