簡體   English   中英

AngularJs Ng-Grid:具有過濾器的多屬性綁定

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

我有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}
]

現在,我想創建一個ng-grid,其中將有一個列代表每個人的出生日期和時間。 由於數據格式不正確。 因此,我們需要一個過濾器。

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

請幫忙。 Plnkr

我會將您的初始JSON服務器數據與要推送到ng-grid的數據分開。

因此,在為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()
  })
}

然后為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
    };

這是一個矮人,展示了正在運用的技術

這適用於除一個日期(位置3的一個日期)以外的所有日期。 該日期似乎無法使用您的過濾器正確格式化。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM