Angularjs 在Ui网格中应用单元过滤器_Angularjs_Angular Ui Grid_Ng Grid

Angularjs 在Ui网格中应用单元过滤器

angularjs

Angularjs 在Ui网格中应用单元过滤器,angularjs,angular-ui-grid,ng-grid,Angularjs,Angular Ui Grid,Ng Grid,我必须创建以下网格。但我想应用cellFiler或rowFilter。我怎么做 $scope.columns = [{ field: 'Trade Version #110010' }]; $scope.gridOptions = { enableSorting: true, columnDefs: $scope.columns, onRegisterApi: function( gridApi ) { $scope.gridApi = gridApi;

我必须创建以下网格。但我想应用cellFiler或rowFilter。我怎么做

$scope.columns = [{ field: 'Trade Version #110010' }];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    }...
]

$scope.columns=[{field:'Trade Version#110010'}]；
$scope.gridOptions={
enableSorting:true，
columnDefs:$scope.columns，
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
var cellTemplate='ui网格/selectionRowHeader'；//您可以在这里使用自己的模板
$scope.gridApi.core.addRowHeaderColumn（{name:'rowHeaderCol'，displayName:''，宽度：200，cellTemplate:{{row.entity['property']}}}）；
}
};
$scope.gridOptions.data=[
{
“属性”：“修改日期”，
“cellFilter”：“convertLocalDate”日期：“MMM dd，yyyy”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“财产”：“交易日期”，
“贸易版#110010”：[
11,
11,
2017
]
}...
]

连接采摘器

提前谢谢

Kiran gopal

不确定您想用它做什么，但下面将把“测试过滤器”连接到每行的末尾

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'Trade Version #110010',
                      cellFilter: 'testFilter'}];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Modifier",
        "Trade Version #110010": "Some Trade Modifier"
    },
    {
        "property": "Type",
        "Trade Version #110010": "Some Product"
    },
    {
        "property": "RIC Code",
        "Trade Version #110010": 1313,
         "cellFilter": "RICFilter | format: 'tt/yy",
    },
    {
        "property": "What Changed",
        "Trade Version #110010": "Some info"
    },
    {
        "property": "Settlement Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Price",
        "Trade Version #110010": "345"
    },
    {
        "property": "Trade Reference #",
        "Trade Version #110010": 110010
    }
]
}]).filter('testFilter', function() {
  return function(value) {
    return value + " Test Filter";
  }
});

var-app=angular.module（'app'，['ngAnimate'，'ngTouch'，'ui.grid']）；
app.controller（'MainCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.columns=[{field:'Trade Version#110010'，
cellFilter:'testFilter'}]；
$scope.gridOptions={
enableSorting:true，
columnDefs:$scope.columns，
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
var cellTemplate='ui网格/selectionRowHeader'；//您可以在这里使用自己的模板
$scope.gridApi.core.addRowHeaderColumn（{name:'rowHeaderCol'，displayName:''，宽度：200，cellTemplate:{{row.entity['property']}}}）；
}
};
$scope.gridOptions.data=[
{
“属性”：“修改日期”，
“cellFilter”：“convertLocalDate”日期：“MMM dd，yyyy”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“财产”：“交易日期”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“属性”：“交易修改器”，
“交易版本#110010”：“某些交易修饰符”
},
{
“属性”：“类型”，
“贸易版#110010”：“某些产品”
},
{
“属性”：“RIC代码”，
“贸易版#110010”：1313，
“cellFilter”：“RICFilter |格式：'tt/yy”，
},
{
“属性”：“发生了什么变化”，
“贸易版#110010”：“一些信息”
},
{
“财产”：“结算日期”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“财产”：“价格”，
“贸易版#110010”：“345”
},
{
“财产”：“贸易参考号”，
“贸易版#110010”：110010
}
]
}]).filter（'testFilter'，function（）{
返回函数（值）{
返回值+“测试过滤器”；
}
});

不确定您想用它做什么，但下面将把“测试过滤器”连接到每行的末尾

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'Trade Version #110010',
                      cellFilter: 'testFilter'}];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
     var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-top-panel ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['property']}}</div></div>"} );
    }
  };

   $scope.gridOptions.data = [
    {
        "property": "Modified Date",
        "cellFilter": "convertLocalDate | date: 'MMM dd, yyyy'",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Trade Modifier",
        "Trade Version #110010": "Some Trade Modifier"
    },
    {
        "property": "Type",
        "Trade Version #110010": "Some Product"
    },
    {
        "property": "RIC Code",
        "Trade Version #110010": 1313,
         "cellFilter": "RICFilter | format: 'tt/yy",
    },
    {
        "property": "What Changed",
        "Trade Version #110010": "Some info"
    },
    {
        "property": "Settlement Date",
        "Trade Version #110010": [
            11,
            11,
            2017
        ]
    },
    {
        "property": "Price",
        "Trade Version #110010": "345"
    },
    {
        "property": "Trade Reference #",
        "Trade Version #110010": 110010
    }
]
}]).filter('testFilter', function() {
  return function(value) {
    return value + " Test Filter";
  }
});

var-app=angular.module（'app'，['ngAnimate'，'ngTouch'，'ui.grid']）；
app.controller（'MainCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.columns=[{field:'Trade Version#110010'，
cellFilter:'testFilter'}]；
$scope.gridOptions={
enableSorting:true，
columnDefs:$scope.columns，
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
var cellTemplate='ui网格/selectionRowHeader'；//您可以在这里使用自己的模板
$scope.gridApi.core.addRowHeaderColumn（{name:'rowHeaderCol'，displayName:''，宽度：200，cellTemplate:{{row.entity['property']}}}）；
}
};
$scope.gridOptions.data=[
{
“属性”：“修改日期”，
“cellFilter”：“convertLocalDate”日期：“MMM dd，yyyy”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“财产”：“交易日期”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“属性”：“交易修改器”，
“交易版本#110010”：“某些交易修饰符”
},
{
“属性”：“类型”，
“贸易版#110010”：“某些产品”
},
{
“属性”：“RIC代码”，
“贸易版#110010”：1313，
“cellFilter”：“RICFilter |格式：'tt/yy”，
},
{
“属性”：“发生了什么变化”，
“贸易版#110010”：“一些信息”
},
{
“财产”：“结算日期”，
“贸易版#110010”：[
11,
11,
2017
]
},
{
“财产”：“价格”，
“贸易版#110010”：“345”
},
{
“财产”：“贸易参考号”，
“贸易版#110010”：110010
}
]
}]).filter（'testFilter'，function（）{
返回函数（值）{
返回值+“测试过滤器”；
}
});