javascript - how to filter input value in AngularJS -


i'm trying implement filtering on input element. want make filtering input type="text" field. instance, if model contain more available characters want change input value. i've created jsfiddle have directive generate html template dynamically , contains input field.

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 = 1; <= countstars; i++){                 string = string+'*';             }          return string;     } }) .directive('awesome' , function(){     return {         restrict:'e',         template:'<input type="text" ng-model="mymodel" ng-value="mymodel | filter:my" />'     } }) 

could possibly move code filter function? have lot of business logic , don't want keep code in controller, because reusable directive.

i think implementing part of functionality filter not best idea.

it more dynamic if implement directive on input element like:

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

in case more flexible. able pass argument directive (for example length of acceptable value).

also not readable developers make input template of directive because of using model attribute of input field , not binding directive.

is there reason why use directive render simple input? if not, live input in view , add directive instead of filter work data checks limitations.


another approach implement custom form controls. allows control incoming , out-coming data.

here example documentation - implementing custom form controls (using ngmodel)


Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

node.js - How to abort query on demand using Neo4j drivers -