无法将 json 中的值带到 ng-grid 中的超链接

Question

这里我想获取超链接值（在我的例子中是 json 对象中的数据），即超链接格式的 6 和 7。我已经转换了单元格模板，但我无法在网格中获取 json 的值。我得到 "link" 作为文本而不是它的值

    <!DOCTYPE html>
    <html ng-app="myApp">
        <head lang="en">
            <meta charset="utf-8">
            <title>Custom Plunker</title>  
            <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
            <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
            <script type="text/javascript" src="main.js"></script>
        </head>
        <body ng-controller="MyCtrl">
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </html>var app = angular.module('myApp', ['ngGrid']);

main.js
    app.controller('MyCtrl', function($scope) {
        $scope.myData = [{name: "Moroni", age: 50, link: 6},
                         {name: "Tiancum", age: 43, link: 7},
                         ];
        $scope.gridOptions = { 
          data: 'myData', 
          columnDefs: [{ field: 'name', displayName: 'Name' },
                     { field: 'age', displayName: 'Age' },
                     { field: 'link', displayName: 'Link',
                      cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">link</a></div>'
                     }]
        };
    });

Answer 1

将您的模板更改为：

<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">{{ col.link }}</a></div>

Answer 2

为您的链接命名：

  $scope.myData = [{
    name: "Moroni",
    age: 50,
    link: "http://www.google.com",
    linkname: "Google"
  }, {
    name: "Tiancum",
    age: 43,
    link: "http://www.whosebug.com",
    linkname: "Help me!"
  }, ];

然后使用这个单元格模板：

cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.linkname}}</a></div>'

看看这个 Plunker 的完整代码

或者，如果您无法向 json 添加字段，请尝试使用此模板：

cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.link}}</a></div>'

无法将 json 中的值带到 ng-grid 中的超链接

Unable to bring value from json to hyperlink in ng-grid

angularjs

ng-grid