简体   繁体   English

AngularJs Ng-Grid:具有过滤器的多属性绑定

[英]AngularJs Ng-Grid : Multiproperty binding with filter

I have Json object: 我有Json对象:

[
   {name: "Moroni", age: 50, dob: 30051998, tob: 1005},
   {name: "Tiancum", age: 43, dob: 30051987, tob: 2205},
   {name: "Jacob", age: 27, dob: 30051956, tob: 0605},
   {name: "Nephi", age: 29, dob: 30051978, tob: 1605},
   {name: "Enos", age: 34, dob: 30051965, tob: 1305}
]

Now I want to create one ng-grid, in which there will be one column representing the date and time of birth for each person. 现在,我想创建一个ng-grid,其中将有一个列代表每个人的出生日期和时间。 Since the data is not properly formatted. 由于数据格式不正确。 So, we want a filter. 因此,我们需要一个过滤器。

var gridOptions1 = {
        data: 'myData',
        columnDefs: [
            { field:"name", displayName: "NAME"},
            { field:"age", displayName: "AGE"},
            { field:"dob+tob", displayName: "Date & Time"}
        ],
        selectedItems: $scope.selected
    };

Please help. 请帮忙。 Plnkr . Plnkr

I would separate your initial JSON server data from the data that you are going to push into the ng-grid. 我会将您的初始JSON服务器数据与要推送到ng-grid的数据分开。

So, before setting your data source for grid2, I would create your view model: 因此,在为grid2设置数据源之前,我将创建您的视图模型:

$scope.grid2Data = [];
for(var i = 0; i < $scope.myData.length; i++) {

  $scope.grid2Data.push({

    name: $scope.myData[i].name,
    age: $scope.myData[i].age,
    fullDate: $scope.myData[i].dob.toString() + $scope.myData[i].tob.toString()
  })
}

And then configure the columns for grid2 so that you are using the cellFilter property: 然后为grid2配置列,以便您使用cellFilter属性:

var gridOptions2 = {
        data: 'grid2Data',
        columnDefs: [
            { field:"name", displayName: "Name"},
            { field:"age", displayName: "Age"},
            { field:"fullDate", displayName: "Date & Time", cellFilter:"formatDate:'ddMMyyyyHHmm':'HH:mm MM/dd'"}],
        multiSelect: false,
        selectedItems: $scope.selected
    };

Here is a plunker showing the techniqu e in action. 这是一个矮人,展示了正在运用的技术

This works for all but one date (the one at position 3). 这适用于除一个日期(位置3的一个日期)以外的所有日期。 That date doesn't seem to format correctly with your filter. 该日期似乎无法使用您的过滤器正确格式化。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM