2014-10-11 16 views
6

Làm cách nào tôi có thể chọn tất cả các hộp kiểm trên lưới khi tôi nhấp vào hộp kiểm đầu. Hiện tại, nó chỉ nhấp vào các hộp kiểm tra trang hiện tại.Nếu bạn có thể mô phỏng giải pháp trên Plunk, nó rất đánh giá cao. Cảm ơn trước.ngTable với Hộp kiểm không chọn tất cả các hộp kiểm trên lưới

Dưới đây là liên kết: Table with checkboxes

$scope.checkboxes = { 'checked': false, items: {} }; 

// watch for check all checkbox 
$scope.$watch('checkboxes.checked', function(value) { 
    angular.forEach($scope.users, function(item) { 
     if (angular.isDefined(item.id)) { 
      $scope.checkboxes.items[item.id] = value; 
     } 
    }); 
}); 

Trả lời

11

tôi chắc chắn rằng bây giờ bạn đã tìm ra này nhưng kể từ khi câu hỏi đã được để lại chưa được trả lời và tôi đang tìm kiếm một cách để làm điều này chỉ Tôi đã cập nhật plunker của bạn để tham khảo trong tương lai nếu có ai tình cờ gặp câu hỏi này.

http://plnkr.co/edit/PjTlyX?p=preview

Có 2 điều cần xem xét, làm bạn muốn kiểm tra tất cả các hộp kiểm không phân biệt lọc hoặc làm việc kiểm tra cần phải được lọc tâm.

Đặt một biến $ phạm vi vào danh sách lọc nếu bạn muốn bỏ qua lọc vào nguồn dữ liệu

var data = [{id: 1, name: "Moroni", age: 50, money: -10}, 
       {id: 2, name: "Tiancum", age: 43,money: 120}] 
$scope.data = data; 

hoặc nếu bạn muốn chỉ chọn hộp kiểm đã được lọc thiết lập orderedData khác $ phạm vi biến bên trong phương thức $ scope.tableParams

var orderedData = params.sorting() ? 
        $filter('orderBy')(data, params.orderBy()) : 
        data; 
      orderedData = params.filter() ? 
        $filter('filter')(orderedData, params.filter()) : 
        orderedData; 
      $scope.orderedData = orderedData; 

sau đó, bạn có thể tự do lựa chọn các hộp kiểm trong đó bao giờ cách bạn thích bằng cách đơn giản thay đổi $ scope.users đến thích $ biến phạm vi dưới đây

// watch for check all checkbox 
$scope.$watch('checkboxes.checked', function(value) { 
    angular.forEach($scope.users, function(item) { 
     if (angular.isDefined(item.id)) { 
      $scope.checkboxes.items[item.id] = value; 
     } 
    }); 
}); 
+0

Wow..Its thực sự tốt đẹp. Cảm ơn rất nhiều :) Thực ra tôi chưa có giải pháp nào cho đến bây giờ.Thanks again :) – Sampath

+0

Tuyệt vời! Chính xác những gì tôi cần. Cảm ơn bạn. Tôi đã cập nhật nó cho AngularJS 1.6.4 và ngTable 1.0.0: http://plnkr.co/edit/km1Sjv?p=preview –

1

Đây là một cách khác để làm điều đó từ tài liệu chính thức.

Xem Codepen Demo here

Explaination

Bạn có thể tạo mẫu tiêu đề của bạn như

<script type="text/ng-template" id="headerCheckbox.html"> 
    <input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all" value="" /> 
</script> 

và thêm một cột trong bảng của bạn như

<td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td> 

và xem demo mô hình .checkbox.checked cho các thay đổi

$scope.$watch(function() { 
     return self.checkboxes.checked; 
    }, function(value) { 
     angular.forEach(simpleList, function(item) { 
     self.checkboxes.items[item.id] = value; 
    }); 
}); 
Các vấn đề liên quan