如何將我的自定義驗證應用於UI網格單元格模板

有沒有辦法綁定自定義驗證。我想綁定一個說ng-keydown的方法來檢查輸入與我的規則集合。怎麼可以做到。我試圖在ng-change上調用一個$ scope函數，但那不起作用。我試過ng-change="grid.appScope.checkValidaton($event,MODEL_COL_FIE‌LD,true,true)。範圍函數被調用，但參數未定義。我該如何傳遞$ event和ng-model。如何將我的自定義驗證應用於UI網格單元格模板

這是我的專欄：

{ name: "group", editableCellTemplate: 
       "<div><input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\" ng-change=\"grid.appScope.checkValidaton($event,MODEL_COL_FIELD,true,true)\"></div>", displayName: "Group", enableCellEdit: true, showSortMenu: false, cellTooltip: true 
       },

我從我的參考：http://plnkr.co/edit/4Pvc4UYKSf71pIC2XrpY?p=preview

來源

2016-09-28 Saurabh Tiwari

如果驗證檢查發生在失去焦點的單元上，或者它是否需要在每個keydown上，它會對你有用嗎？ –

它需要在關鍵時刻實時...基本上我必須防止輸入。否則我可以使用'.on.afterEdit' –

好。我自己沒有針對這種情況的解決方案。希望別人這樣做。 –

一個，而搜索互聯網和閱讀的UI網事件之後，我編寫了一個指令以使用scope實體和ui網格事件在單擊單元格上應用驗證。

基本技巧是使用自定義可編輯模板並在其字段上應用驗證。

下面是代碼，也可以在我的倉庫here

(function(module){ 

    module.directive('gridValidation', gridValidationFn); 

    gridValidationFn.$inject = ['uiGridEditConstants']; 

    function gridValidationFn(uiGridEditConstants) { 
     var directive = { 
      restrict: 'A', 
      template: '<div><input type="text" ng-model="txtValue" ng-change="changeTxt(txtValue)"/></div>', 
      scope: true, 
      link: gridValidationLinkFn 
     }; 

     return directive; 

     function gridValidationLinkFn(scope, elm, attr) { 

      var oldTxt = scope.row.entity[scope.col.field]; 
      scope.limit = attr.limit; 
      scope.txtValue = oldTxt; 

      function windowClickListener(ev) { 
       if (ev.target.nodeName !== "INPUT") 
        scope.editDone(); 
      } 

      scope.changeTxt = function (val) { 
       if (attr.words) { 
        if (scope.txtValue && scope.txtValue.match(/\S+/g) && scope.txtValue.match(/\S+/g).length > Number(scope.limit)) { 
         scope.txtValue = scope.txtValue.split(/\s+/, Number(scope.limit)).join(" "); 
         scope.row.entity[scope.col.field] = scope.txtValue.split(/\s+/, Number(scope.limit)).join(" "); 
        } 
        else 
         scope.row.entity[scope.col.field] = scope.txtValue; 
       } 
       else { 
        if (scope.txtValue && scope.txtValue.length > Number(scope.limit)) { 
         scope.txtValue = scope.txtValue.slice(0, Number(scope.limit)); 
         scope.row.entity[scope.col.field] = scope.txtValue; 
        } 
        else 
         scope.row.entity[scope.col.field] = scope.txtValue; 
       } 
      }; 

      scope.editDone = function() { 
       scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); 
      }; 

      scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function() { 
       angular.element(window).on('click', windowClickListener); 
      }); 

      scope.$on('$destroy', function() { 
       angular.element(window).off('click', windowClickListener); 
      }); 
     } 

    } 
}(angular.module("ModuleName")));

它可以很好地爲我找到。希望它可以幫助別人

來源

2016-10-29 06:51:49

如何將我的自定義驗證應用於UI網格單元格模板

回答

相關問題