【问题标题】:AngularJS : ui grid show multi lines in a cellAngularJS:ui网格在一个单元格中显示多行
【发布时间】:2015-07-13 22:27:15
【问题描述】:

我正在尝试在一个单元格中显示多个电话号码。我想在新行中显示每个数字。我尝试了多种方法,但我无法弄清楚。有人能帮忙吗 。下面是我的 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>');
    };
})

【问题讨论】:

    标签: angularjs angular-ui-grid


    【解决方案1】:

    您可以通过使用自定义模板并重复您拥有的电话号码数量来实现此目的。

    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

    【讨论】:

    • 非常感谢。你太棒了。
    • 你知道如何解决身高问题吗?尝试添加边距,通过类填充,但它不起作用。
    • 电话号码是否固定。 rowHeight 属性可用于增加高度,但这会增加所有行的高度。
    • 是的,可变行高很难实现,但您可以拥有可垂直滚动的固定高度 div。它只是一种解决方法
    • 这是我正在处理的实际场景的最终代码。请参阅 plunker 。 plnkr.co/edit/9jMXStWj796klBExQoum?p=preview
    猜你喜欢
    • 2017-08-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-30
    • 1970-01-01
    相关资源
    最近更新 更多