如何在AngularJS中過濾輸入值

我正在嘗試在我的輸入元素上實現過濾。我想對type =「text」字段的輸入進行過濾。例如，如果模型包含的可用字符多於我想要更改輸入值的字符數。我創建了jsfiddle 我有指令，動態生成html模板，它包含輸入字段。如何在AngularJS中過濾輸入值

var app = angular.module('app', []) 

.controller('ctrlr', function($scope){ 
    $scope.myModel = "test"; 
    $scope.availableCharacters = 5; 
    $scope.$watch('myModel', function(newValue, oldValue){ 
     if(!newValue){ 
      return; 
     } 
     if(newValue.length > 5){ 
      $scope.cutString();  
     } 
    }); 
    $scope.cutString = function(){ 
     var length = $scope.myModel.length; 
     var string = $scope.myModel.slice(0, $scope.availableCharacters); 
     var countStars = length - string.length; 
     $scope.myModel = $scope.createStars(string, countStars); 
    } 
    $scope.createStars = function(string, countStars){ 
     for(var i = 1; i <= countStars; i++){ 
       string = string+'*'; 
      } 

     return string; 
    } 
}) 
.directive('awesome' , function(){ 
    return { 
     restrict:'E', 
     template:'<input type="text" ng-model="myModel" ng-value="myModel | filter:my" />' 
    } 
})

是否有可能將我的代碼移動到過濾器函數？我有很多業務邏輯，我不想將我的代碼保存在控制器中，因爲它是可重用的指令。

來源

2015-04-14 Aleksey Kiyanov

我認爲將這部分功能作爲過濾器來實現並不是最好的主意。

這將是更加充滿活力，如果你要實現它作爲指導您輸入元素上，如：

<input type="text" ng-model="myModel" ng-value="myModel" max-length="20" />

在這種情況下，它會更加靈活。您將能夠將參數傳遞給指令（例如可接受值的長度）。

而且它是不是真的讀了另一個開發者，讓您的輸入作爲指令的模板，因爲您正在使用的型號爲輸入域的屬性，而不是從指令結合它。

你有什麼理由爲什麼使用指令來渲染簡單的輸入？如果不是，那麼只需將它作爲視圖中的輸入，並添加指令而不是過濾器來處理數據檢查限制。

另一種方法是實現自定義窗體控件。這將允許您控制傳入和傳出的數據。

下面是一個文檔示例 - Implementing custom form controls (using ngModel)

來源

2015-04-14 16:49:33

感謝您的建議。我會考慮的。 –

我肯定會選擇ngModelController，因爲您使用的是formfields，並且不會在任何地方複製控制器代碼，以便將特定輸入字段放到您的應用程序中。我有一個類似的問題，輸入字段的實時i18n（無頁面刷新）數字值，當我從德語切換到英語語言環境時，必須切換數字的組和小數點分隔符。正如U10提到檢查ngModel。 http://stackoverflow.com/a/15346236/1554767 該鏈接打開我的心靈，又領我到ngModel的地獄。 –

如何在AngularJS中過濾輸入值

回答

相關問題