bing_15007 2017-09-11 08:36 采纳率: 25%
浏览 1863

angularjs1.x修改如何获取checkbox选中的那条数据以弹窗展现?初学请多多指教

<div ng-controller="checkController">
<div class="list-operation">
    <p>
        <button type="button" class="btn btn-info btn-sm" ng-click="Modify()"><span class="glyphicon glyphicon-edit"></span>修改</button>             
        <button type="button" class="btn btn-danger btn-sm" ng-click="batchIds()"><span class="glyphicon glyphicon-floppy-remove"></span>删除</button>                
    </p>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th width="3%"><input type="checkbox" ng-model="selectAll" ng-checked="select" ng-click="changeAll()"></th>
      <th>名称</th>
      <th>电话</th>
      <th>是否</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td><input type="checkbox" ng-checked="selectAll" ng-click="funcChange()" ng-model="user.isSelected"/></td>
      <td>{{user.username}}</td>
      <td>{{user.tel}}</td>
      <td>{{user.Shuttle}}</td>
    </tr>
  </tbody>
</table>
</div>
<div class="modal fade" id="Modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width:800px;">
        <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" id="myModalLabel">修改</h4>
            </div>
            <div class="modal-body">
                            <input type="text" value="名称"/>
                            <input type="text" value="电话"/>
                            <input type="text" value="是否"/>
                    </div>
                 </div>
    </div>
</div>
JS:
    myApp.controller('checkController', function($scope,$http,$location) {
        $http.get('lib/data/data.json').success(function(response) {
            var arr = [];
            var data = response.data;
            for(var i=0;i<data.length;i++){

            }
            data.forEach(function(val,index){
                var arrdata = val;
                arrdata.Shuttle = arrdata.Shuttle =='1'?'是':'否';
                arr.push(arrdata)
            })
            $scope.users = arr
        })

        //修改
        $scope.Modify=function(){
            $('#Modify').modal('show');

        }


        $scope.selectAll=false;//全选默认为false

   //全选按钮check的点击事件
      $scope.changeAll = function(){//全选/取消全选  
        angular.forEach($scope.users,function(v,k){  
          v.isSelected = $scope.selectAll;  
        })  
      }; 
    //单个数据的check事件
      $scope.funcChange = function(){// 当所有都选中时  
        $scope.select = true;  
        angular.forEach($scope.users,function(v,k){  
          $scope.select = $scope.select && v.isSelected;  
        });  
      };
    });
  • 写回答

1条回答 默认 最新

  • devmiao 2017-09-11 15:50
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 krpano-场景分组和自定义地图分组
  • ¥15 lammps Gpu加速出错
  • ¥15 关于PLUS模型中kapaa值的问题
  • ¥15 关于博途V17进行仿真时无法建立连接问题
  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器
  • ¥15 为什么安装HCL 和virtualbox之后没有找到VirtualBoxHost-OnlyNetWork?
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题
  • ¥20 Oracle替换.dbf文件后无法连接,如何解决?(相关搜索:数据库|死循环)