个人中心
gpt4 book ai didi

javascript - CellFilter 在 UI-Grid 中的 $http 响应之前被调用

转载 作者：数据小太阳 更新时间：2023-10-29 04:49:02 25 4
gpt4 key购买 nike

我正在使用 ui-grid 绑定(bind) Angular 色表中的数据，该表包含部门 ID 作为主键。我正在调用 Web Api 以获取表中的所有 Angular 色并显示在 ui-grid 中。

部门表

enter image description here

Angular 色表

enter image description here

我真正的问题是，当它使用 cellFilter 绑定(bind)到网格时，我想将部门 ID 转换为部门名称，这就是为什么我声明 objMapping 以将部门 ID 映射到部门名称。但是每次我运行时，我都会看到 cellFilter 自定义函数，即“mapDepartmentName”在设置 objMapping 之前被调用，而且我无法在“mapDepartmentName”中引用 objMapping。

我的网格看起来像这样:-

enter image description here

然而，当我编辑时，我得到的结果如下，这是绝对正确的:-

enter image description here

我的代码片段如下:-

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.edit']);
myApp.controller("ctrlRole", ['$scope', 'MetadataOrgFactory', function ($scope, MetadataOrgFactory) {    
    var arrDepts = [];
    var objMapping = {};

    MetadataOrgFactory.getApiCall('getpublisheddepts', function (dataSuccess) {
        $scope.department = dataSuccess;
        for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {
            
            var objDept = { id: dataSuccess[cntElem].DeptId, DeptId: dataSuccess[cntElem].DeptName }
            arrDepts.push(objDept);

            objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;
            
        }      
        $scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts;
    }, function (dataError) {
    });
   

    $scope.gridRole = {
        data: 'roleData',
        columnDefs: [
          {
              field: 'RoleName', displayName: 'Role Name',              
          },
          {
              field: 'DeptId', displayName: 'Department Name',             
              editableCellTemplate: 'ui-grid/dropdownEditor',
              cellFilter: 'mapDepartmentName:this',
              editDropdownValueLabel: 'DeptId',
          },
          {
              field: 'RoleDesc', displayName: 'About Role',              
          },
          {
              field: 'WorkingHrs', displayName: 'Working Hours',              
          },
          {
              field: 'RequestNumber', displayName: 'RequestNumber',
              cellEditableCondition: true
          }
         
        ]

    }

    MetadataOrgFactory.getApiCall('getallroles', function (dataSuccess) {
        $scope.roleData = dataSuccess;
    }, function (dataError) {
    });

    
}])

.filter('mapDepartmentName', function () {
    return function (input, scope) {
        if (!input) {
            return '';
        } else {
            return objMapping[input];
        }
    };
});
<!DOCTYPE html>
<html>
<head>
    <title></title>	
    <style>
        .gridStyle {
            border: 5px solid #d4d4d4;
            height: 200px;
        }
    </style>
    <meta charset="utf-8" />
    <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="../Scripts/AngularControllers/RoleController.js"></script>
    <script src="../Scripts/AngularServices/ApiCallService.js"></script>
</head>
<body ng-app="appHome">
    <div ng-controller="ctrlRole">
       
        <div class="gridStyle" ui-grid="gridRole" ui-grid-edit>
        </div>
    </div>

</body>
</html>

最佳答案

在工厂回调结束时调用 getpublisheddepts 中的 $scope.$apply()。

由于您没有展示您的工厂，我相信它会异步执行某些操作，而不会通知 View 以反射(reflect)更改。

关于javascript - CellFilter 在 UI-Grid 中的 $http 响应之前被调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43717706/

25 4 0
文章推荐： c# - SharpSSH 私钥无效
文章推荐： c# - 鼠标滚轮事件未触发
文章推荐： c# - 如何在不同(但兼容)模型之间转换 lambda 表达式？
文章推荐： c# - 允许一次只调用一个实例的异步方法
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com