如何更新角度ui网格中的相应行答案

【问题标题】：How to update the respective row in angular ui grid如何更新角度ui网格中的相应行
【发布时间】：2018-07-12 18:29:20
【问题描述】：

您好，我正在努力避免在 Angular ui 网格中出现名称重复。

$scope.gridOptions.columnDefs = [
    { name: 'id', width: '25%' },
    { field: 'name', 
      displayName: 'Name', 
      width: '25%',
      height:'auto',
      'cellTemplate':'<div><input type="text" ng-class="{error:grid.appScope.hasError(row.entity)}" ng-change="grid.appScope.objectHasChanged(row.entity)"  ng-input="row.entity.name" ng-model="row.entity.name" /><div class="errorspan" ng-show="grid.appScope.hasError(row.entity)" >Error in field</div></div>'
    },
    { name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
      cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: 
      [
        { id: 1, gender: 'Male' },
        { id: 2, gender: 'Female' }
      ] 
    },
    {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">InActive</div>'
    }
  ];

这是我的小伙伴：http://plnkr.co/edit/PlUfwRGEezYQVMpXmiIr?p=preview

问题在于它打开所有其他行。

我做错了什么？有没有办法只更新到特定的行？

【问题讨论】：

标签： javascript angularjs angular-ui-grid

【解决方案1】：

您可以使用 ui-grid-validate（请参阅 http://ui-grid.info/docs/#/tutorial/322_validation）。

<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-validate class="grid"></div>

在 JS 中：

  uiGridValidateService.setValidator('alreadyIn',
    function(argument) {
      return function(newValue, oldValue, rowEntity, colDef) {
        if (!newValue) {
          return true; // We should not test for existence here
        } else {
          angular.forEach(argument, function(obj, key) {
            if (obj.name === newValue) return true;
          });
          return false;
        }
      };
    },
    function(argument) {
      return "You can't insert duplicate";
    }
  );

这是您的 plunker 更新：http://plnkr.co/edit/hCVa6hbdlIH2RW4JnYSg

【讨论】：

【解决方案2】：

Angular UI-Grid 行实体更新步骤：
1.网格列定义。

columnDefs : [
                {
    field : 'email',
                cellTemplate : '<a href="#" 
    ng-click="grid.appScope.update(row)">&nbsp{{COL_FIELD}}&nbsp;</a>'
    }

在控制器的 $scope 内声明一个变量，即


    var selectedRow;
    $scope.update = function(myRow) {
    $scope.selectedRow = myRow;
    $scope.objCopy = angular.copy($scope.selectedRow.entity);
    //testing or update from a modal form or get the server copy
    $scope.objCopy.email=abc@gmail.com;
    $scope.selectedRow.entity  = angular.copy($scope.objCopy);
    }

引用方法和参数：http://ui-grid.info/docs/#!/api/ui.grid.class:GridRow

【讨论】：

【解决方案3】：

只需检查@Mithun 的更改，并对您的代码稍作修改：

 $scope.hasError = function(entity){  
  var changed = entity.name;
 // console.log('changed => '+changed);
 var count = 0;
 console.log($scope.gridOptions.data)
   for (var key in $scope.gridOptions.data)
   {
     console.log($scope.gridOptions.data[key]);

     if ($scope.gridOptions.data[key].name == changed) {
       count++;
     }
   }

   if(count>1){
      return true;
   }
    return false;
 };

Plunker 链接：http://plnkr.co/edit/Lj7vUXR9k1nuOcqvW8u9?p=preview。

希望这能满足您的要求

【讨论】：