Angularjs ui-grid filter items by checked/uncheck checkbox

Question

I am using ui-grid for testing purpose. I added a checkbox on each row and a select on header.

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}
  ];
}]);

And this is the result

So how can I filter items by checked/uncheck checkbox? I only want to see all checked or unchecked items using filter.

hic1086 · Accepted Answer · 2015-10-08 09:05:25Z

1

I added the attribute selected to your data in order to be able to filter using the checkbox. You can delete it if you want to send data to the server. modifications:

template:

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

data:

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

here is a plunnker: pluncker

But,I recommand to use the selector of the ui-grid: tutorial of ui-grid selector

answered Oct 8, 2015 at 9:05

hic1086

7553 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ui-grid filter items by checked/uncheck checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related