AngularJS:ui 网格在单元格中显示多行 [英] AngularJS : ui grid show multi lines in a cell

问题描述

我试图在一个单元格中显示多个电话号码.我想在新行中显示每个数字.我尝试了多种方法，但我无法弄清楚.有人能帮忙吗 .下面是我的 plnkr 的链接.

i am trying to display multiple phone numbers in one cell . I want to display each number in a new line . I have tried multiple ways but I am unable to figure out. can anyone help with this . below is the link to my plnkr .

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

.filter('phoneListFilter', function () {
    return function (telePhoneList) {
        var telePhoneArray = [];

        for (var i in telePhoneList) {
                telePhoneArray.push(telePhoneList[i]);
        }
        return telePhoneArray.join('<br>');
    };
})

推荐答案

您可以通过使用自定义模板并重复您拥有的电话号码数量来实现这一点.

You can achieve this by having a custom template and repeat over the number of phone numbers you have.

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    rowHeight:50,
    columnDefs: [
      { field: 'name' },
      { field: 'phoneList', name: 'Phone Numbers', cellTemplate:'<div ng-repeat="item in row.entity[col.field]">{{item}}</div>'}
    ],
     enableColumnResizing: true
  };

  $http.get('data.json')
  .success(function (data) {
    $scope.gridOptions.data = data;
  });
}]);

高度可能会成为问题.看看这个 plnkr http://plnkr.co/edit/c65CZm19bGJbWfZT15u6?p=preview

The height may become an issue. Take a look at this plnkr http://plnkr.co/edit/c65CZm19bGJbWfZT15u6?p=preview

这篇关于AngularJS:ui 网格在单元格中显示多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！