web-dev-qa-db-ja.com

UI-grid angularjsの条件付きセルテンプレート

以下のui-grid cellTemplateにデータを表示するときに条件を追加する方法：

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

期待される結果は、行ステータスshow Active/NonActive/Deletedであるはずです。

これが plunker です

前もって感謝します。

angularjsangular-ui-grid
15
Hendra

externalScopesを使用する必要があります。

マークアップで、このようにグリッドホルダーを定義します。

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

そして、コントローラーで次のコードを使用します。

var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};

var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

またはangularフィルターを使用します。

これはrendersテキストのみであることに注意してください。最適なアプローチは、myDataを変換して、ui-gridで使用する前に実際のテキスト状態にすることです。後でテキストベースのフィルタリングを行いたい場合に備えて。

Plunker です

28
mainguy

この問題を解決するには、ng-ifを使用することをお勧めします。

$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">Non Active</div>'
    }]
};
19
Yang Zhang

外部スコープを使用せずに別のソリューションを提供しています：

テンプレートは次のようになります。

var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';

プランカーは次のとおりです。

http://plnkr.co/edit/OZtU7GrOskdqwHW5FIVz?p=preview

14
nabinca

cellFilterを使用します。

columnDefs: [{
    field: 'code'
}, {
    field: 'name'
}, {
    field: 'status',
    cellFilter: 'mapStatus'
}]


app.filter('mapStatus', function() {

    var statusMap = ['Active', 'Non Active', 'Deleted'];

    return function(code) {
        if (!angular.isDefined(code) || code < 0 || code > 2) {
            return '';
        } else {
            return statusMap[code];
        }
    };
});

plunker

10
Tom

テンプレートを変更する必要があります。 angle-ui-gridで外部スコープを参照する場合、grid.appScopeを使用できます。

var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>';
3
Alfredo Morales

以下のスクリプトを試してください。それは私のために働いています。

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

  var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.showMe= function(val) {
    return statusTxt[val];
  };

var statusTemplate = '<div>{{grid.appScope.showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

$scope.gridOptions.data = [{
  "code": "Cox",
  "name": "Carney",
  "status": 0
}, {
  "code": "Lorraine",
  "name": "Wise",
  "status": 1
}, {
  "code": "Nancy",
  "name": "Waters",
  "status": 2
  }];
  }
]);
0
Shriya