Question

我在角度使用ui-grid，我希望有一个“click me”按钮，当点击时，会提醒或记录相关的特定行数据或索引的内容。我怎么做到这一点？现在我可以触发警告框，但不能获取行的实际内容（甚至是例如特定的键）。

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.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">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
data: 'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company' },
{ field: 'click', cellTemplate: '<button class="btn primary" ng-click="grid.appScope.sampledetails()">Click Me</button>' }
]
};
$scope.sampledata = { "data": [] };
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
$scope.sampledetails = function () {
alert('Hi Click is working');
return false;
};
});
</script>
<style type="text/css">
.grid {
width: 500px;
height: 400px;
}
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="sampledata.data.length==0">No Records Found</div>
</div>
</div>
</form>
</body>
</html>

Answer 1

首先，您的代码无法读取。使用嵌入式代码段，jsfiddle，codepen或plunkr

其次，如果您要查看ui-grid的模板，您会看到它只使用ng-repeat。像这样：

ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"

所以你可以覆盖单元格模板：

var actionCellTemplate = '<div class="ui-grid-cell-contents"' + 
                         'ng-model="row.entity.username"' +
                         'ng-click="clickMe(row)">....</div>'

$scope.gridOptions = {
    columnDefs: [
        ....
        {
            name: 'action',
            cellTemplate: actionCellTemplate
        }
    ]
};

如何点击并获取行内容或至少使用angular-ui-grid的索引？

1 个答案: