HTML5输入使用Angular空值0

Question

If I have an input such as below. What is the cleanest way I can ensure the empty string (input) is always 0.00.

I was thinking it could be done with a watch but was wondering if there would be an easier way built into angular or html5 to handle it.

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

Edit: What I actually needed was blur which handles clicking out of input as well as tabbing out. Tomek Sułkowski helped me get to this solution as you can see in this directive. Once the user leaves the input it will default to 0 if there is no value.

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

Actually a better solution than setting a watch in a controller would be to create a directive that sets proper modelValue if viewValue is " " (space). It will be far more reusable, because if you'll have to use it in other places you won't need to write the same logic in each of those cases.

Mind that Angular trims input values by default . You need to turn it off on your input (hence the ng-trim="false" ).

Something like this:

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

 <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> 

Answer 2

The Jade markup:

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

The angular code:

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

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

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

Heres the demo: http://codepen.io/nicholasabrams/pen/EjbLpW

Answer 3

This would work, {{ test != ""? test: '0.00' }} {{ test != ""? test: '0.00' }}

your updated jade mark up would be,

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