Question

我有以下输入字段

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

它正确显示但已被禁用。我收到的错误是“[ngModel：nonassign] Expression”ceremony.CeremonyFee | number：2'是不可转让的“。我理解为什么它是错误的，但不知道如何让它在输入字段上工作。感谢。

Answer 1

带有input的{p> ng-model用于输入数据，number过滤器用于显示数据。由于过滤器值不可绑定，因此您可以看到它们不兼容。您必须决定使用input。

做什么

你想要它作为输入吗？用户可以输入自己的号码，您只需要验证吗？使用ie 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>

Answer 2

如错误所述，您的ng-model属性中有一个'不可转让的'表达式。

您应该只使用ceremony.CeremonyFee。

|用于ng-repeat以指示应将哪个表达式用作过滤器。

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

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

每次更改<input>元素数据时，CeremonyFee也会更新。

Answer 3

更新

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

遵循纯粹的js解决方案，但我不建议这样的东西！

＆＃13;

step

＆＃13;

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;
      }
    } 
  });
});

＆＃13;

<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>指令需要viewmodel可分配（或可绑定）属性，因此，您无法添加管道...

＆＃13;

ng-model

＆＃13;

angular.module('test', [])

＆＃13;

Answer 4

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

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));
            });
        }
  };
}]);

相对容易应用它。

输入字段上的AngularJS货币过滤器

4 个答案:

更新