AngularJs UI网格celltemplate调用一个函数返回的HTML文本

当我有cellTemplate为以下，AngularJs UI网格celltemplate调用一个函数返回的HTML文本

{ field: 'Trial', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.getAnchorLink(row)}}</div>' }

我所得到的是列<a data-ng-href="localhost:50849/PatientCategory/Edit/1">Edit</a>。但是我想要的只是一个带有编辑文本的锚链接。

的getAnchorLink功能如下

 $scope.getAnchorLink = function (rowObj) { 
      var tempId = rowObj.entity.Id.toString(); 
      return '<a data-ng-href="localhost:50849/PatientCategory/Edit/' + tempId + '">Edit</a>' 
     };

可有人请纠正我在哪里，我错了吗？

来源

2015-10-19 VivekDev

如果你想显示在下面的UI网锚标记是一个示例代码，

app.js

var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav','ui.grid.pinning']); 
app.controller('MainCtrl', ['$scope', '$http', '$log', 
function($scope, $http, $log) { 
$scope.gridOptions = { 
    columnDefs: [{ 
    'field': 'code' 
    }, { 
    'field': 'name' 
    }, { 
    'field': 'status' 
    },{ 
    'field':'link', 
    'cellTemplate':'celltemplate.html' 
    }] 
}; 

$scope.gridOptions.data = [{ 
    "code": "Cox", 
    "name": "Carney", 
    "status": 0 
}, { 
    "code": "Lorraine", 
    "name": "Wise", 
    "status": 1 
}, { 
    "code": "Nancy", 
    "name": "Waters", 
    "status": 2 
    }]; 
} 
]);

celltempalte.html

<div> 
<a href="test.html?code={{row.entity.code}}&name={{row.entity.name}}&status={{row.entity.status}}"> 
Click me 
</a> 
</div>

index.html

<!doctype html> 
<html ng-app="app"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> 
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script> 
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"> 
<link rel="stylesheet" href="main.css" type="text/css"> 
</head> 
<body> 
<div ng-controller="MainCtrl"> 
<div ui-grid="gridOptions" ui-grid-cellNav></div> 
</div> 
<script src="app.js"></script> 
</body> 
</html>

的main.css

.grid { 
width: 500px; 
height: 400px; 
}

来源

2015-10-19 05:16:12 SakthiSureshAnand

好吧，我会试试看，但我在哪里保持celltempalte.html。在一个文件中？或在哪里？你能不能告诉一下。我是AngularJs和用户界面的新手 – VivekDev

如果你想在同一个控制器内创建celltemplate.html，请尝试这种方式**例如**：'var linkCellTemplate ='

' + ' Visible text ' + '

';' – SakthiSureshAnand

但是你可以改变你的gridOptions像这个'cellTemplate：linkCellTemplate'指出'var linkCellTemplate'（变量名）。也请用我的英文 – SakthiSureshAnand

AngularJs UI网格celltemplate调用一个函数返回的HTML文本

回答

相关问题