Question

我正在使用自定义单元格模板，其字段绑定到函数表达式。单元数据与具有多个键的Object绑定。我正在使用一个自定义函数，它将一个字符串返回到该列单元格模板。

现在执行此实施后，我遇到了两个问题。

过滤不适用于该特定单元格。
移动到该单元格的编辑模式时出现角度错误：

错误：[ngModel：nonassign] Expression＆＃39; row.entity＆＃39; getDisplayTitle＆＃39;＆＃39;是不可转让的。元素：＆＃39; getDisplayTitle＆＃39;＆＃34; class =＆＃34; ng-pristine ng-untouched ng-valid ng-scope＆＃34;＆gt;

我使用plunker复制了这个问题。

Plunker - UiGrid

 var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.getDisplayTitle = function (rowEntity, column) {
            var displayTitle = "";
            if (rowEntity[column] !== null) {
                if (rowEntity[column].length > 1) {
                    for (var i = 0; i < rowEntity[column].length; i++) {
                        displayTitle = displayTitle + rowEntity[column][i].street + "; ";
                    }
                }
                else if (rowEntity[column].length == 1) {
                    displayTitle = rowEntity[column][0].street;
                }
                else
                    displayTitle = rowEntity[column].street;
            }
            else {
                displayTitle = "";
            }
            return displayTitle;
        }
    $scope.gridOptions = {
            enableSorting: true,
            enableFiltering:true,
            columnDefs: [
              { name:'firstName', field: 'first-name' },
                  { 
              name:'address', 
              field: 'getDisplayTitle()', 
              cellTemplate : '<div class=".ui-grid-cell-contents"> {{grid.appScope.getDisplayTitle(row.entity, col.colDef.name)}} </div>'},

            ,
              { name:'1stFriend', field: 'friends.name' }

          ],
            data : [      {
                               "first-name": "Cox1",
                               "friends": {name:"ritesh"},
                               "address": [{street:"ritesh1", city:"Laurel", zip:"39565"},{street:"puneet", city:"Laurel", zip:"39565"},{street:"kavleen", city:"Laurel", zip:"39565"},]

                           },{
                               "first-name": "Cox2",
                               "friends": {name:"puneet"},
                               "address": [{street:"ritesh2", city:"Laurel", zip:"39565"},{street:"puneet", city:"Laurel", zip:"39565"},{street:"kavleen", city:"Laurel", zip:"39565"},]

                           },{
                               "first-name": "Cox3",
                               "friends": {name:"kavleen"},
                               "address": [{street:"ritesh3", city:"Laurel", zip:"39565"},{street:"puneet", city:"Laurel", zip:"39565"},{street:"kavleen", city:"Laurel", zip:"39565"},]

                           },{
                               "first-name": "Cox4",
                               "friends": {name:"alankar"},
                               "address": [{street:"ritesh4", city:"Laurel", zip:"39565"},{street:"puneet", city:"Laurel", zip:"39565"},{street:"kavleen", city:"Laurel", zip:"39565"},]

                           }
                       ]
          };

}]);

由于

Answer 1

问题是由于这一行：

field: 'getDisplayTitle()',

对网格说，应该在rowEntity.getDisplayTitle()内找到该值[注意，这不是指向$scope.getDisplayTitle()，所以我认为它不会像你希望的那样工作。“

但正如您所见，getDisplayTitle()是一个函数，您无法为函数赋值：

getDisplayTitle() = foo; // This is not a valid expression in javascript

因此，您必须将行实体的属性放在field内，并且在用户结束编辑后您会发现该值已更新。

在UI网格中编辑和过滤自定义单元格模板中的问题

1 个答案: