AngularJS : angular-ui-grid showing rows based on the condition

Question

I would like my grid to show rows that only matches a creteria. For example i want my grid to show only the rows where name is Brian.

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.myData = [{name: "Brian", code: 50,count:20},
                 {name: "Jason", code: 43,userid:1},
                 {name: "Brian", code: 27,userid:10},
                 {name: "Devon", code: 29,userid:7},
                 {name: "Kale", code: 34,userid:2}];

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',
    columnDefs: [
      { field: 'name', displayName: 'Name'},
      {field: 'code', displayName: 'Code'},
      { field: 'userid', displayName: 'UserId'
        }
      }
    ]
  };
}]);

how can i accomplish that? Thank you in advance...

Answer 1

You need to use a filter. You can read about the standard angular filter here. You can read about how to make custom filters here.

Answer 2

One of the work around would be, Instead of passing myData do filter you criteria and then assign that filtered data to new scope variable and assign that inside your gridOptions data field

Code

$scope.filteredData = myData; //make filter your data manually here 

$scope.gridOptions = {
    enableSorting: true,
    data:'filteredData', //passed filtered data here.
    columnDefs: [
      { field: 'name', displayName: 'Name'},
      {field: 'code', displayName: 'Code'},
      { field: 'userid', displayName: 'UserId'
        }
      }
    ]
};