Question

我的应用程序中有一个ng-grid，我应该在ng-grid的单元格中大写单词，这样第一个字符就会大写。我该怎么办？

我尝试在ng-grid中的该字段中使用cellTemplate属性，如下所示：

field : 'myField',                            
                        displayName : '',                        
                        cellTemplate : '<div class="ngCellText" ng-style="{\'text-transform\':capitalize;}">{{row.getProperty(col.field)}}</div>'                                                
                      }, {

在普通HTML页面中测试'text-transform':capitalize时，它可以正常工作。但在cellTemplate中，至少不是像上面那样的代码。

有没有人想过如何将它定义为ng-grid？

Answer 1

您可以使用'cellTemplate'来更改首字母大小写。而不是编写单独的函数更改cellTemplate，如：

{
  cellTemplate: '<div>{{row.entity[col.field].substring(0,1).toUpperCase()+
             row.entity[col.field].substring(1)}}</div>' 
}

Answer 2

请注意，text-transform: capitalize会将每个单词的第一个字符转换为大写字母，而不仅仅是第一个单词...这可能不是您想要的;但是，如果你确实希望每个单词的第一个字符大写，你需要像这样编写单元格模板：

$scope.gridOptions.columnDefs[0].cellTemplate: '<div class="ngCellText" ng-class="col.colIndex() style="text-transform:capitalize;">{{COL_FIELD}}</div>';

如果您只想将整个单元格内容的第一个字符转换为大写，那么您可以使用这样的过滤器：

app.filter('capitalize', function () {
  return function (input, scope) {
    if (input != null) {
      return input.substring(0,1).toUpperCase() + input.substring(1);
    }
  }
});

$scope.gridOptions.columnDefs[0].cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()>{{COL_FIELD | capitalize}}</div>';

或者作为第三种选择，您可以使用CSS和::first-letter伪元素，如下所示：

div.myCellClass::first-letter {
  text-transform: capitalize;
}

$scope.gridOptions.columnDefs[0].cellTemplate: '<div class="ngCellText myCellClass" ng-class="col.colIndex()>{{COL_FIELD}}</div>';

ng-grid在cellTemplate中以大写字母更改第一个字符串字符

2 个答案: