如何在angularjs中创建输入格式归因指令?

时间:2018-11-15 10:56:38

标签: javascript html angularjs

我是angularjs的新手。我想创建自定义指令,删除中的零。例如,如果我输入00014,则在输入字段中将有14。 我已经有一些代码,但是我不确定它是正确的:

(function () {
angular.module('issuetrackerApp')
    .directive('validateTime', validateTime);
function validateTime() {
    return {
        restrict: 'A',
        scope: {
            validateTime: '='
        },
        templateUrl: '...'
    };
  }
});

HTML

 <input type=number>

1 个答案:

答案 0 :(得分:0)

您可以使用onchange事件处理程序截断前导零

 scope.value.replace(/^0+/, '');

这里是一个例子。

console.clear();

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


app.directive("textbox", function(){
  return {
    require: "?ngModel",
    template: "<input ng-model='value' ng-change='onChange()'>",
    link: function(scope, element, attrs, ngModel){
      if (!ngModel) return;
      
      scope.onChange = function(){
      
        scope.value = scope.value.replace(/^0+/, '');
       
      };
      
      ngModel.$render = function(){
        scope.value = ngModel.$modelValue;
      };
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.13/angular.js"></script>

<div ng-controller="MainCtrl" ng-form="form1" ng-app="test">
    
    <pre><textbox name="editor" ng-model="foo" minlength="3"></textbox></pre>
    {{value}}
    <hr>
    
  </div>