Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  <!DOCTYPE html>
<html ng-app="com.ngbook.demo">
<head>
<meta name="description" content="text transform for ngModel">
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://greengerong.github.io/self/cdn/angular.js"></script>
</head>
<body >
  <div ng-controller="DemoController as demo">
   <input type="text" ng-model="demo.text" text-transform="capitalize">
      <pre>{{demo.text | json }}</pre>  
      <button ng-click="demo.change();">change </button>
​
  </div>
</body>
</html>
 
 angular.module("com.ngbook.demo", [])
    .controller("DemoController", [function(){
      var vm = this;
      vm.text = "aaa";
        vm.change = function(){
            vm.i = vm.i || 0;
            vm.text = "" +(vm.i++)
        };
      return vm;
    }])
    .directive('textTransform', function() {
     var transformConfig = {
         uppercase: function(input){
             return input.toUpperCase();
         },
         capitalize: function(input){
             return input.replace(
                 /([a-zA-Z])([a-zA-Z]*)/gi,
                 function(matched, $1, $2){
                    return $1.toUpperCase() + $2;
                });
         },
         lowercase: function(input){
             return input.toLowerCase();
         }
     };
    return {
        require: 'ngModel',
        link: function(scope, element, iAttrs, modelCtrl) {
            var transform = transformConfig[iAttrs.textTransform];
            if(transform){
                modelCtrl.$parsers.push(function(input) {
                    return transform(input || "");
                }); 
               modelCtrl.$formatters .push( function(a){
                   console.log('invoke formater', a);
                   return a;
               });
                element.css("text-transform", iAttrs.textTransform);
            }
        }
    };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
greengerongpro
0viewers