输入字段上的AngularJS货币筛选器

AngularJS currency filter on input field

本文关键字：货币 筛选 AngularJS 字段 输入      更新时间：2023-09-26

我有以下输入字段

 <input type="text" class="form-control pull-right" ng-model="ceremony.CeremonyFee | number:2">

它显示正确，但已被禁用。我收到的错误是"[ngModel:nonassign]表达式'ceremony.CeremonyFee|number:2'不可分配"。我理解它为什么出错，但不知道如何在输入字段中使用它。谢谢

input和ng-model用于输入数据，number过滤器用于显示数据。正如您所看到的，由于筛选值是不可绑定的，因此它们是不兼容的。你必须决定你想用input做什么。

你想让它成为一个输入吗？用户可以输入自己的号码，而您只需要验证？使用即pattern属性：

<input type="text" ng-model="ceremony.CeremonyFee" pattern="[0-9]+(.[0-9]{,2})?">

你希望它是一个输出吗？用户不需要输入自己的值吗？不要使用ng-model，而是使用value：

<input type="text" value="{{ceremony.CeremonyFee | number:2}}" readonly>

更新：

我真的不明白你需要什么，但是，如果你只想让用户只插入两个数字，你应该使用一个简单的html属性，看看min、max、step。。。

遵循纯js解决方案，但我不建议这样做！

angular.module('test', []).controller('TestCtrl', function($scope) {
  var vm = $scope;
  var testValue = 0;
  Object.defineProperty(vm, 'testValue', {
    get: function() { return testValue; },
    set: function(val) {
      val = Number(val);
      
      if(angular.isNumber(val) && (val < 100 && val > 0)) {
        console.log(val);
        testValue = val;
      }
    } 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
  <div ng-controller="TestCtrl">
    <input style="display:block; width: 100%; padding: 1em .5em;" type="number" ng-model="testValue" />
  </div>
</section>

ng-model指令需要viewmodel可赋值（或可绑定）属性，因此，不能添加管道。。。

angular.module('test', [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-init="testValue = 0">
  <label ng-bind="testValue | currency"></label>
  <input style="display:block;" ng-model="testValue" type="number"/>
</div>

作为一个错误状态，您在ng-model属性中得到了一个"不可赋值"表达式。

您应该只使用ceremony.CeremonyFee。

|用于ng repeat，指示应使用哪个表达式作为筛选器。

如果你想在控制器/链接中用初始数据填充<input>，你应该给它一个初始值，例如

$scope.ceremony = {
    CeremonyFee: 'My first ceremony'
}

每次您的<input>元素数据发生变化时，CeremonyFee也会更新。

我找到并使用了这个页面上的解决方案。

http://jsfiddle.net/k7Lq0rns/1/

    'use strict';
    angular.module('induction').$inject = ['$scope'];
    angular.module('induction').directive('format',['$filter', function ($filter) {
      return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });
            elem.bind('blur', function(event) {
                var plainNumber = elem.val().replace(/[^'d|'-+|'.+]/g, '');
                elem.val($filter(attrs.format)(plainNumber));
            });
        }
  };
}]);

相对容易应用。

相关文章：