Angularjs 角度UI网格-自定义标题模板和筛选

我正在寻找一个拥有基本过滤器和自定义模板的好例子。我在教程网站上找不到好的例子。请参阅附件中的plunk，其中我正在设置筛选和自定义标题模板。过滤是否需要嵌入到标题模板中

var-app=angular.module（'app'，['ngAnimate'，'ui.grid']）；
app.controller（'MainCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.columns=[{field:'name'，headerCellTemplate:'name'}，{field:'gender'}]；
$scope.gridOptions={
enableSorting:true，
columnDefs:$scope.columns，
启用筛选：true
};
$scope.remove=函数（）{
$scope.columns.splice（$scope.columns.length-1,1）；
}
$scope.add=函数（）{
$scope.columns.push（{field:'company'，enableSorting:false}）；
}
$scope.splice=函数（）{
$scope.columns.splice（1,0，{field:'company'，enableSorting:false}）；
}
$scope.change=函数（）{
$scope.columns=[{field:'First'，}，{field:'Second'}，{field:'third'}]；
$scope.gridOptions.columnDefs=$scope.columns；
}
$scope.unplice=函数（）{
$scope.columns.拼接（1,1）；
}
$http.get（'https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.成功（功能（数据）{
$scope.gridOptions.data=数据；
console.log（数据）
});
}]);

---

提前谢谢

你可以创建一个自定义模板并将其添加到你的网格中。试试这个，你会有一些想法。我已经更新了博客文章中的一些代码。你可以这样做。希望这能有所帮助

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'name', headerCellTemplate: '<div class="grand-total">Name</div>' }, { field: 'gender' }];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    enableFiltering: true
  };

  $scope.remove = function() {
      $scope.columns.splice($scope.columns.length-1, 1);
  }

  $scope.add = function() {
      $scope.columns.push({ field: 'company', enableSorting: false });
  }

  $scope.splice = function() {
      $scope.columns.splice(1, 0, { field: 'company', enableSorting: false });
  }

  $scope.change = function() {
    $scope.columns = [{ field: 'First', }, { field: 'Second' }, { field: 'third' }];
    $scope.gridOptions.columnDefs = $scope.columns;
  }

  $scope.unsplice = function() {
      $scope.columns.splice(1, 1);
  }

  $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      console.log(data)
    });
}]);