Question

我有一个text类型的输入字段，并绑定到范围内的属性。

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

如果someProperty的值为4.32，我希望输入显示4.32%。我不希望someProperty等于4.32％。值保持不变。只有显示更改。页面呈现时，％字符显示在值之后。当用户更改输入值时，仅显示数字，当输入失去焦点时，％再次显示。我知道这可以使用指令完成，但我不知道如何。我不擅长AngularJS。

Answer 1

使用此

＆＃13;

angular
  .module("docsSimpleDirective", [])
  .controller("Controller", [
    "$scope",
    function($scope) {
      $scope.text = '';
    }
  ])
  .directive("percent", function() {
    return {
      restrict: "A",
      transclude: true,
      scope: {},
      link: function(scope, element, attr) {
        element.on("focusout", function() {
          var str = element.val();
          element.val(str + "%");
        });

        element.on("focus", function() {
          var str = element.val();
          element.val(str.substring(0, str.length - 1));
        });
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="docsSimpleDirective">
  <input type "text" id="someProperty" percent ng-model="text"> {{text}}
</div>

＆＃13;

Answer 2

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

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

Answer 3

在你的HTML中

function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
            $(document).ready(function() {


                var check = getParameterByName('page');
                if ((check === '1') || (check === null)) {
                    var autoLoad = setInterval(function() {
                        $('#autoload').load('{{ route('autoload') }}');
                    }, 2000);
                } else {clearInterval(autoLoad);}

            });

控制器中的

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

这工作正常..希望这会有所帮助。

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

3 个答案: