ui-grid angularjs中的条件单元模板

How to add conditional when showing data in ui-grid cellTemplate below:

如何在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>'
    }]
};

The expected result should be row status show Active/NonActive/Deleted.

预期的结果应该是显示活动/非活动/删除的行状态。

Here is the plunker

这是一美元

Thanks in advance.

提前谢谢。

6 个解决方案

#1

You have to use externalScopes.

你必须使用外部作用域。

In your markup define the gridholder like this.

在您的标记中定义这样的gridholder。

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

And in your controller use this code:

在你的控制器中使用这个代码:

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
  }]
};

Or use an angular filter.

或者使用角滤波器。

Note that this only renders text. The best approach would be to transform myData to have real text states before using it in ui-grid. Just in case you want to do some text based filtering later on.

注意，这只显示文本。最好的方法是在ui-grid中使用myData之前将其转换为具有真实文本状态。以防以后需要进行基于文本的过滤。

Here is a Plunker

这是一个一美元

#2

I would suggest to use ng-if solve this problem.

如果解决了这个问题，我建议使用ng。

$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>'
    }]
};

#3

I have got another solution for you without using external scopes:

我有另外一个不用外部作用域的解决方案:

The Template looks like this:

模板是这样的:

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

Here is the plunker:

这是一美元:

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

#4

Use a cellFilter.

使用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

砰砰作响

#5

You must change your template. When you are referring to external scopes in angular-ui-grid you may use grid.appScope.

您必须更改模板。当您在angular-ui-grid中引用外部作用域时，您可以使用grid.appScope。

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

#6

Try below script. It is working for me.

试试下面的脚本。这对我很有效。

  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
  }];
  }
]);

#1