4

http://jsfiddle.net/crimsonalucard/238u6/

javascript:

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

myModule.controller('myController', function($scope){
});

myModule.directive('addColons', function(){
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel){
            ngModel.$parsers.push(addColons);
            ngModel.$formatters.push(addColons);
        }
    };
});

function insert(text, insertion, index)
{
    return text.slice(0,index) + insertion + text.slice(index);
}

function addColons(text)
{

    if(text.length !== undefined)
    {
        console.log("length is: " + text.length);
        for(var i = text.length-2; i>0; i-=2)
        {
            if(text.charAt(i) !== ':')
            {
                text = insert(text, ":", i);
            }
        }
    }
    return text;
}

HTML：

<div ng-app="myModule">
    <div ng-controller="myController">
        <input add-colons type="text" ng-model="time"/>
        <p>How do I get the text in the input field above to dynamically change to be equivalent to the string below as I am typing?</p>
        <p>$scope.time = {{time}}</p>
    </div>
</div>

请参阅上面的 JSFiddle。我希望输入字段中的文本使用 $scope.time 中看到的格式动态更新自身。这将如何完成？

所以基本上当我在输入字段中键入 (0000000) 时，我希望输入字段本身（不仅仅是 $scope.time）动态更改以匹配我将 $scope.time 格式化为 (0:00:00:00) 的内容.

（编辑：）我希望解决方案除了角度本身之外不使用任何其他库。我意识到 angular-UI 掩码指令是一种可能的解决方案，但这不是我想要的。

4

1 回答 1

5

您可以使用 AngularUI 的 Mask 指令。http://angular-ui.github.io/

这里也有一个关于这个话题的讨论，有一个例子。

于 2013-04-12T02:25:34.710 回答