如何使用AngularJS将字符附加到输入字段中的数字？

我有一个文本类型的输入字段，并绑定到范围中的属性

<input type=text= ng-model="vm.someProperty">

如果someProperty的值为4.32，我希望输入显示

4.32%

。我不希望某些属性等于4.32%。值保持不变。只有显示更改。当页面呈现时，值后面会显示%字符。当用户更改输入值时，仅显示数字，当输入失去焦点时，再次显示百分比。 我知道这可以通过使用指令来实现，但我不确定如何实现。我不精通AngularJS。

在您的html中

<input ng-focus="onFocus(someProperty)" ng-blur="onBlur(someProperty)" ng-model="someProperty" />

这个工作很好。。希望这会有所帮助。

使用这个

angular
.module（“docsSimpleDirective”，[]）
.controller（“controller”[
“$scope”，
职能（$范围）{
$scope.text=''；
}
])
.指令（“百分比”，函数（）{
返回{
限制：“A”，
是的，
作用域：{}，
链接：功能（范围、元素、属性）{
on（“focusout”，function（））{
var str=element.val（）；
元素.val（str+“%”）；
});
元素上（“焦点”，函数（）{
var str=element.val（）；
val（str.substring（0，str.length-1））；
});
}
};
});

{{text}}



这不符合我对someProperty仅具有数值的要求。无法将“%”添加到值中。它只用于显示。当页面呈现时，%不会显示，但我添加了该部分。谢谢
$scope.someProperty= '';
$scope.onFocus = function(someProperty) {
    $scope.someProperty = (someProperty.length >0)? someProperty.split("%")[0] : '';
}

$scope.onBlur = function(someProperty) {
   $scope.someProperty = (someProperty.length >0)? someProperty+'%' : '';
}

vm.percentSymbol = function (type) {
      vm.someProperty = vm.replace(/\%/g, '') + '%';
};

<input type=text= ng-model="vm.someProperty" ng-blur = "vm.percentSymbol()">