Angularjs 可在UI网格中单击的列数据_Angularjs_Angular Ui Grid_Celltemplate

Angularjs 可在UI网格中单击的列数据

angularjs

Angularjs 可在UI网格中单击的列数据,angularjs,angular-ui-grid,celltemplate,Angularjs,Angular Ui Grid,Celltemplate,我想使ui网格中某个单元格内的数据成为可单击的这是我的密码：- InventoryList.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .gridStyle { border: 5px soli

我想使ui网格中某个单元格内的数据成为可单击的

这是我的密码：-

InventoryList.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <title></title>
        <style>
            .gridStyle {
                border: 5px solid #d4d4d4;
                height: 200px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
        <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
        <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>   
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />         
        <script src="../Scripts/AngularControllers/InventoryListController.js"></script>   
    </head>
    <body ng-app="appHome">
        <div ng-controller="ctrlInvList">
            <div class="gridStyle" ui-grid="gridInvList">
            </div>

        </div>
    </body>
    </html>

如果按此代码执行，则网格如下所示：-

但当我想使“库存编号”列成为可点击的列时，我引入了以下从互联网上搜索到的代码。请看单元模板部分

InventoryListController.js

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {    
    $scope.gridInvList = {
        data: 'invlistdata',
        enableFiltering: true,       
        paginationPageSize: 10,        
        columnDefs: [
            {
                field: 'SiteInventoryNumber', displayName: 'Inventory Number',                 
            },
            { field: 'InventoryTypeName', displayName: 'Inventory Type' },
            { field: 'MakeModel', displayName: 'Make Model' },          
            { field: 'CityName', displayName: 'City Name' },
            { field: 'Specification', displayName: 'Specification' },            
        ]
    }   
}]);

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {    
    $scope.gridInvList = {
        data: 'invlistdata',
        enableFiltering: true,       
        paginationPageSize: 10,        
        columnDefs: [
            {
                field: 'SiteInventoryNumber', displayName: 'Inventory Number',  
                cellTemplate: '<div ng-click="grid.appScope.foo()" ></div>'
            },
            { field: 'InventoryTypeName', displayName: 'Inventory Type' },
            { field: 'MakeModel', displayName: 'Make Model' },          
            { field: 'CityName', displayName: 'City Name' },
            { field: 'Specification', displayName: 'Specification' },            
        ]
    } 

    $scope.foo = function ()
    {
        alert("Hello");
    }
}]);

var myApp=angular.module（'appHome'，['ui.grid'，'ui.grid.pagination'，'ui.bootstrap']）；
myApp.controller（“ctrlInvList”、[“$scope”、“MetadataOrgFactory”、“$uibModal”、函数（$scope、MetadataOrgFactory、$uibModal）{
$scope.gridInvList={
数据：“invlistdata”，
启用筛选：正确，
分页页面大小：10，
columnDefs：[
{
字段：“SiteInventoryNumber”，显示名称：“库存编号”，
单元格模板：“”
},
{字段：'InventoryTypeName'，显示名称：'Inventory Type'}，
{字段：'MakeModel'，显示名称：'MakeModel'}，
{字段：'CityName'，显示名称：'City Name'}，
{字段：'Specification'，显示名称：'Specification'}，
]
} 
$scope.foo=函数（）
{
警惕（“你好”）；
}
}]);

这将输出以下结果：-

您能告诉我需要纠正什么才能得到正确的结果吗？

将

ui网格单元格内容

类添加到您的单元格模板中，您的函数将被触发。它可能是一个ui网格指令所必需的

使用

{{COL_FIELD}}

显示单元格内容

默认单元格模板如下所示：

{{COL_FIELD}}

var myApp=angular.module（'appHome'，['ui.grid'，'ui.grid.pagination'，'ui.bootstrap']）；
myApp.controller（“ctrlInvList”[“$scope”，“$uibModal”，函数（$scope，$uibModal）{
$scope.gridInvList={
数据：[
{
SiteInventoryNumber:“INV100001231”，
InventoryTypeName:“测试”
}
],
启用筛选：正确，
分页页面大小：10，
columnDefs：[{
字段：“SiteInventoryNumber”，
displayName:'库存编号'，
cellTemplate:“{{COL_FIELD}}”
},
{
字段：“InventoryTypeName”，
displayName:“库存类型”
},
{
字段：“MakeModel”，
displayName:“制作模型”
},
{
字段：“CityName”，
displayName:“城市名称”
},
{
字段：“规范”，
displayName:'规范'
},
]
}
$scope.foo=函数（）{
警惕（“你好”）；
}
}]);
.gridStyle{
边框：5px实心#d4；
高度：200px；
}