在ui-grid中使用工具提示

时间:2015-11-29 00:23:48

标签: angularjs tooltip angular-ui-grid

我尝试使用angularjs工具提示,其中包含用于行单元格的angularjs tamplate

以下是使用的两列

grep

{ 
    name: 'id',
    field: 'id', 
    displayName: 'N° CF', 
    grouping: { groupPriority: 0 }, 
    sort: { 
        priority: 0, 
        direction: 'asc' 
    }, 
    width: '200', 
    cellTemplate: `
        <span 
            ng-if="row.groupHeader && 
            col.grouping.groupPriority === row.treeLevel">
            {{COL_FIELD}}
        </span>
        <span 
            ng-if="!row.groupHeader" 
            tooltips 
            tooltip-view="customers.html" 
            tooltip-side="bottom" 
            tooltip-show-trigger="mouseover" 
            tooltip-view-ctrl="PhoneListCtrl">
            {{row.entity.partNumber}}
        </span> ' 
    }, 

数据来自json文件,直到现在

{ name: 'customer',field: 'customer', visible: false}

,工具提示的模板如下

[
    {
        "description": "description1", 
        "a": 1, 
        "b": 3,
        "c": 3,  
        "d": 2, 
        "e": 3, 
        "id": 1000, 
        "groupingStatus" :  1,
        "manufacSiteCode": "manufacSiteCode1", 
        "nissanLocalCode": "nissanLocalCode1", 
        "supplierName": "supplierName1",
        "town": "town1",
        "partNumber": "part1",
        "partDescription": "partDescription1",

        "customer" : [{ "customerId" : "cust1",
                        "apiCode" : "api1",
                        "g2bCode" : "g2b1",
                        "label" : "label1"
                        },
                        { "customerId" : "cust2",
                        "apiCode" : "api2",
                        "g2bCode" : "g2b2",
                        "label" : "label2"
                        },
                        { "customerId" : "cust1",
                        "apiCode" : "api1",
                        "g2bCode" : "g2b1",
                        "label" : "label1"
                        }]                      
        }, 
    {..........................
...............................

控制工具提示显示的两件事是defti列中的“tooltip-view-ctrl =”PhoneListCtrl“”和上一个模板中的“customer in row.entity.customer”。当我用范围中的变量替换“row.entity.customer”时,它可以工作。但是,我想显示来自该行的数据,直到现在它才能工作。所以我的问题是:我有什么办法可以在模板中传递“row.entity.customer”来获取来自我的json文件的数据。这是一个关于网格中控制器是什么以及网格范围是什么的问题。

这是掠夺者。提前感谢您的回答 http://plnkr.co/edit/jY0lH1FsczgR3jrQH3iL?p=preview

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。我在columndef模板中传递了一个模型,如下所示

tooltip-view-model="row.entity.customer"

在我的模板中,我将其用作以下

<table border="1" >
  <tr>
    <th>G2B Code</th>
    <th>Label</th>
    <th>API Code</th>
  </tr>
<tr ng-repeat="customer in tooltipViewModel">
<td>{{customer.g2bCode}}</td>
<td>{{customer.label}}</td>
<td>{{customer.apiCode}}</td>
</tr>
</table>

幸运的是,angularjs工具提示为我提供了传递模型的可能性,但我想更一般地了解我们如何引用网格的内部范围以及如何将该范围的属性和函数传递给模板< / p>