Question

这是我的代码

＆＃13;

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.myData = [{
        sv_name: "Moroni",
        sv_code: 50,
        isActive: false
    }, {
        sv_name: "Tiancum",
        sv_code: 43,
        isActive: true
    }, {
        sv_name: "Jacob",
        sv_code: 27,
        isActive: false
    }, {
        sv_name: "Nephi",
        sv_code: 29,
        isActive: true
    }, {
        sv_name: "Enos",
        sv_code: 34,
        isActive: false
    }];

    $scope.gridOptions = {
        enableSorting: true,
        data: 'myData',
        columnDefs: [{
            field: 'sv_name',
            displayName: 'Nombre'
        }, {
            field: 'sv_code',
            displayName: 'Placa'
        }, {
            field: 'action',
            cellTemplate: '<div>' + '<button ng-click="grid.appScope.delete(row)" >Delete</button>' + '</div>',
            enableSorting: false,
            enableColumnMenu: false
        }]
    };


}]);

＆＃13;

   <!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/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">
     <br>
     <br>
     <div id="grid1" ui-grid="gridOptions" class="grid"></div>
  </div>
  <script src="app.js"></script>
   </body>
</html>

＆＃13;

在上面的代码我有3列数据，我没有显示第3列数据，但基于第3列isActive值true启用删除按钮，当isActive值为false时禁用删除按钮。

Answer 1

cellTemplate: '<div>' + '<button ng-click="row.entity.isActive || grid.appScope.delete(row)"  data-ng-disabled="row.entity.isActive">Delete</button>' + '</div>',

ng-disabled不能用于ng-click，但是如果bool值为false，你可以在ng-click中使用条件“TrueBoolValue || function（...）”来禁用函数调用。

如何使用UI-GRID基于列值禁用和启用按钮？

1 个答案: