angularjs实现表格选择和弹出modal框

需求

有个表单，需要能像使用阿里云ecs那样，能够选择和删除，能够全选，能够弹出modal框确认

实现

一个表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<table class="table-bordered table" ng-show="showNow">
  <thead>
    <th><input type="checkbox" ng-change="changeAll()" ng-model="selectAll"></th>
    <th>环境名称</th>
    <th>分支名</th>
    <th>分支来源</th>
    <th>当前状态</th>
    <th>创建人</th>
    <th>描述信息</th>
    <th>创建时间</th>
  </thead>
  <tbody>
    <tr ng-repeat="record in nows" ng-click="changeCurrents(record, $event)">
      <td><input type="checkbox" ng-model="record.checked" ng-change="changeCurrent(record, $event)"></td>
      <td><a class="hander" href="#!/xxx">{{ record.label }}</a></td>
      <td>{{ record.branch_name }}</td>
      <td>{{ record.branch_from }}</td>
      <td>{{ record.status }}</td>
      <td>{{ record.user }}</td>
      <td>{{ record.message }}</td>
      <td>{{ record.timestamp }}</td>
  </tbody>
</table>
<div class="mine-operations pull-left" ng-show="showNow">
   <input type="checkbox"  ng-change="changeAll()" ng-model="selectAll">
   <span><button class="mybtn" ng-disabled="selectData.length <= 0" ng-click="deleteEnvs()">删除环境</button></span>
   <span><button class="mybtn" ng-disabled="false">创建新环境</button></span>
</div><br>

这时候就能实现基本的表格了

实现全选(参考网上)和修改状态

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


//全选
$scope.changeAll = function() {
  angular.forEach($scope.nows, function(item){
    item.checked = $scope.selectAll;
  })
  $scope.count = $scope.selectAll ? $scope.nows.length : 0;
  if ($scope.selectAll) {
    $scope.selectData = $scope.nows;
  } else {
    $scope.selectData = [];
  }
  console.log($scope.selectData);
}
//checkbox点击
$scope.changeCurrent = function(current) {
 $scope.count += current.checked ? 1 : -1;
 $scope.selectAll = $scope.count === $scope.nows.length;
 $scope.selectData = [];
 angular.forEach($scope.nows, function(item) {
   if(item.checked){
     $scope.selectData[$scope.selectData.length] = item;
   }
 });
 console.log($scope.selectData);
};
//行选
$scope.changeCurrents = function(current, $event) {
 if(current.checked == undefined){
   current.checked = true;
 }else{
   current.checked = !current.checked;
 }
 $scope.changeCurrent(current, $event);
};

弹出modal

可以引入ui.bootstrap或者popeye 我使用的的是https://pathgather.github.io/popeye/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


$scope.deleteEnvs = function () {
  var envs = $scope.selectData;
  var message = '';
  angular.forEach(envs, function(item){
    message = message +  item.label
  })
  var modal = Popeye.openModal({
    templateUrl: 'templates/handsome/checkModal.html',
    controller: "deleteEnvCheckCtl",
    resolve:  {
      envs: function () {
        return envs
      },
      scope1: function() {
        return $scope
      }
    }
  })
}

需要注意写一个controller和写一个html,

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


app.controller('deleteEnvCheckCtl', function($scope, Popeye, envs, $http, scope1) {
  $scope.items = envs;
  $scope.sure = function () {
    Popeye.closeCurrentModal();
    angular.forEach($scope.items, function(item){
      var params = {};
      params['label'] = item.label;
      params['user'] = scope1.currentUser.user_name;
      params['message'] = params['user'] + ' deleted in mine'
      console.log(params);
      $http({
        method: 'POST',
        url:'xxx',
        data: params
      }).then(function successCallback(response) {
        console.log(response);
      }, function errorCallback(response) {
        console.log(response);
      });
    })
    alert("已经删除");
    return;
  }
  $scope.cancel = function () {
    Popeye.closeCurrentModal();
    return;
  }
})

如下是我写的html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div class="delelteCheck">
  <h1>请注意，如下环境将会被删除，删除不可逆，请确认好！</h1>
  <ul>
    <li ng-repeat="env in items" class="danger"><font size="5" color="red">{{ env.label }}</font></li>
  </ul>
  <div class="buttons float-right">
    <button class="btn btn-primary" ng-click="sure()">确认删除</button>
    <button class="btn btn-primary" ng-click="cancel()">取消</button>
  </div>
</div>