Question

如果我有如下输入。什么是最干净的方法，我可以确保空字符串（输入）始终为0.00。

我原本以为可以用手表完成，但想知道是否有一种更简单的内置角度或html5来处理它。

<input class="form-control" type="number" step="0.01" placeholder="$" 
                                           data-ng-model="status.approved.price" />

编辑：我实际需要的是模糊处理单击输入和标签的模糊。正如您在本指令中所看到的，TomekSułkowski帮助我找到了这个解决方案。一旦用户离开输入，如果没有值，它将默认为0.

return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModelCtrl) {
        elem.on('blur', function() {
            if (!elem.val()) {
                elem.val('0');
                ngModelCtrl.$setViewValue('0');
            }
        });
    }
};

Answer 1

实际上，比在控制器中设置手表更好的解决方案是创建一个指令，如果viewValue为＆＃34; 设置正确的modelValue。＆＃34; （空间）。它将更加可重用，因为如果你必须在其他地方使用它，你就不需要在每种情况下编写相同的逻辑。

请注意，Angular默认修剪输入值。您需要在输入时将其关闭（因此ng-trim="false"）。

这样的事情：

＆＃13;

angular.module('app', [])
.directive('myZeroable', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (viewValue) {
                if (viewValue === ' ') {
                    return 0; // or '0.00' - depending on your requirements
                }
                return viewValue;
            });
        }
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<div ng-app="app">
  <label>Write a single space</label>
  <input ng-model="test" my-zeroable ng-trim="false" />
  <pre>Current model value is: {{ test | json }}</pre>
</div>

＆＃13;

Answer 2

Jade标记：

main(ng-app="demo")
  input(type="text", ng-model="test", ng-controller="demo-controller" ng-change="setInitVal(test)") 
  {{ test }}

角度代码：

    "use strict";
    var demo = angular.module('demo',[]);

    demo.controller('demo-controller', function($scope){
      $scope.setInitVal = function(inputVal){

        if (!inputVal) {
            $scope.test = '0.00';
        }
      };
    });

继承人演示：http://codepen.io/nicholasabrams/pen/EjbLpW

Answer 3

这可行，{{ test != ""? test: '0.00' }}

您更新的玉标记将是，

main(ng-app="demo")
  input(type="text", ng-model="test", ng-controller="demo-controller" ng-change="setInitVal(test)") 
  {{ test != ""? test: '0.00' }}

使用Angular空值0的Html5输入

3 个答案: