如果你想顯示在下面的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;
}
好吧,我會試試看,但我在哪裏保持celltempalte.html。在一個文件中?或在哪裏?你能不能告訴一下。我是AngularJs和用戶界面的新手 – VivekDev
如果你想在同一個控制器內創建celltemplate.html,請嘗試這種方式**例如**:'var linkCellTemplate ='
但是你可以改變你的gridOptions像這個'cellTemplate:linkCellTemplate'指出'var linkCellTemplate'(變量名)。也請用我的英文 – SakthiSureshAnand