Angularjs ui-grid 通过 checked/uncheck 复选框过滤项目

Question

我正在使用 ui-grid 进行测试。我在每一行上添加了一个复选框，在 header.

上添加了一个 select

HTML

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" class="grid"></div>
    </div>

  </body>
</html>

JS

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
  $scope.gridOptions = {
  enableFiltering: true,
  columnDefs: [
      {
        name: 'Items',
        filter: {
          type: uiGridConstants.filter.SELECT,
          selectOptions: [
            {value: '0', label: 'Unselect'},
            {value: '1', label: 'Selected'}
          ]
        },
        cellTemplate: '<input type="checkbox" name="select_item"/>'
      },
      {
        name: 'Name',
        field: 'name'
      },
      {
        name: 'Age',
        field: 'age'
      }
    ]
  };

  $scope.gridOptions.data = [
    { name: 'User 1', age: 20},
    { name: 'User 2', age: 30},
    { name: 'User 3', age: 40}
  ];
}]);

这是结果

那么如何通过 checked/uncheck 复选框过滤项目？我只想使用过滤器查看所有选中或未选中的项目。

Answer 1

我将选定的属性添加到您的数据中，以便能够使用复选框进行过滤。如果要向服务器发送数据，可以将其删除。修改：

模板：

  `cellTemplate: '<input type="checkbox" name="select_item" value="true" ng-model="row.entity.selected"/>`'

数据：

  $scope.gridOptions.data = [
    { name: 'User 1', age: 20,selected:false},
    { name: 'User 2', age: 30,selected:false},
    { name: 'User 3', age: 40,selected:false}
  ];

这是一个插件：pluncker

但是，我建议使用 ui-grid 的选择器：tutorial of ui-grid selector

Angularjs ui-grid 通过 checked/uncheck 复选框过滤项目

Angularjs ui-grid filter items by checked/uncheck checkbox

angularjs

angular-ui-grid