在 angular 1.5 组件内的 ui-grid 中设置 editableCellCondition

Question

我正在尝试根据数据中的标志将行 editable/not 设置为可编辑。我可以在 angular 1.5 组件之外使它工作，但似乎无法在组件的控制器内访问 row.entity。

function memberDisplayCtrl ($scope, memberFactory,uiGridConstants) {
    var ctrl = this;
    ctrl.people = memberFactory.getMembers();

    ctrl.checkStatus = function(ctrl){

        // How do I do something like this:
        // if (ctrl.row.entity.Status === 'Y') { return 'true'; } else {return 'false';}
    };

    ctrl.gridOptions = {
        enableSorting: true,
        enableCellEdit:false,
        cellEditableCondition: ctrl.checkStatus(ctrl),
        enableHorizontalScrollbar : 0,
        enableVerticalScrollbar   :  0,
        enableColumnMenus: false,
        minRowsToShow: ctrl.people.length,
        columnDefs: [
            { displayName:'First Name', name: 'fname', enableCellEdit:true },
            { displayName:'Last Name', name: 'lname', enableCellEdit:true },
            { displayName:'Date of Birth', name: 'DOB', type:'date', enableCellEdit:true, cellFilter: 'date:"yyyy-MM-dd"'},
            { displayName:'Address', name: 'address', enableCellEdit:true},
            { displayName:'Status',name: 'Status', enableCellEdit: true}
        ],
        data : ctrl.people
    };

}

我很确定我遇到了范围问题，但似乎无法解决。如何访问 row.entity？我的控制器内有一个独立的作用域（因为它是组件的一部分）

笨蛋在这里：https://plnkr.co/edit/Wz7gKs

谢谢

Answer 1

只需将一个函数传递给 cellEditableCondition 而不是执行它：

cellEditableCondition: ctrl.checkStatus

请注意，该函数接收到的参数不是当前控制器的 this（在您的情况下别名为 ctrl），而是 ui-grid的作用域，所以我把ctrl重命名为scope:

function memberDisplayCtrl ($scope, memberFactory,uiGridConstants) {
    var ctrl = this;
    ctrl.people = memberFactory.getMembers();

    ctrl.checkStatus = function(scope) {
      return scope.row.entity.Status === 'Y'
    };

    ctrl.gridOptions = {
        enableSorting: true,
        enableCellEdit:false,
        cellEditableCondition: ctrl.checkStatus,
        enableHorizontalScrollbar : 0,
        enableVerticalScrollbar   :  0,
        enableColumnMenus: false,
        minRowsToShow: ctrl.people.length,
        columnDefs: [
            { displayName:'First Name', name: 'fname', enableCellEdit:true },
            { displayName:'Last Name', name: 'lname', enableCellEdit:true },
            { displayName:'Date of Birth', name: 'DOB', type:'date', enableCellEdit:true, cellFilter: 'date:"yyyy-MM-dd"'},
            { displayName:'Address', name: 'address', enableCellEdit:true},
            { displayName:'Status',name: 'Status', enableCellEdit: true}
        ],
        data : ctrl.people
    };

}

另外，我看到了你评论的代码：

if (ctrl.row.entity.Status === 'Y') { 
  return 'true'; 
} 
else {
  return 'false';
}

此处您打算 return 字符串变量在两种情况下都将始终评估为布尔值 true，您应该 return 布尔值：

if (ctrl.row.entity.Status === 'Y') { 
  return true; 
} 
else {
  return false;
}

等于更短的版本：

return ctrl.row.entity.Status === 'Y';

笨蛋：https://plnkr.co/edit/KXbJ40?p=preview

在 angular 1.5 组件内的 ui-grid 中设置 editableCellCondition

setting a editableCellCondition in a ui-grid inside an angular 1.5 component

angularjs

ui-grid