Question

我正在尝试做一些非常简单的事情。当用户选中输入字段时，我想取其值并将值更改为每个数字包含两位小数，甚至.00

这是HTML

<input type="text" class="form-control" only-digits ng-blur="vm.cleanNumbers(vm.order.frameInformation.A)" ng-model="vm.order.frameInformation.A">

控制器被调用并且值已更改但输入从不反映更改

function cleanNumbers(value) {
    if (value !== 0) {
        var hasDecimal = value.indexOf('.') > -1;
        value = value.replace('$', '');
        value = value.replace(/[,]+/g, '');
        value = parseFloat(value);

        if (isNaN(value)) {
            return 0;
        }

        value = value.toFixed(2);
    }
}

在plunkr中，我记录了这些值并看到了我希望输入更新的内容。

Answer 1

这是您要求的答案。

第一个问题是将控制器用作语法，

ng-controller="test as vm"

由于您要将值转换为Float并尝试在文本字段中显示它，由于float的文本值与文本相同，因此获得相同的值。

您必须将浮动转换回字符串才能显示。

以下是修订后的代码

＆＃13;

// Code goes here

(function () {
    'use strict';

    angular
        .module('admin', [])
        .controller('test', test);
        
        test.$inject = ['$log'];

    function test($log) {
      
      $log.debug('controller loaded');
        /*jshint validthis: true */
        let vm = this;
        vm.order = {};
        
        vm.cleanNumbers = cleanNumbers;
        
        function cleanNumbers(test) {
          $log.debug(test);
          let value = vm.order[test];
          if (value != 0 && value != undefined) {
                var hasDecimal = value.indexOf('.') > -1;
                value = value.replace('$', '');
                value = value.replace(/[,]+/g, '');
                value = parseFloat(value);

                if (isNaN(value)) {
                    return 0;
                }

                //value = value.toFixed(2);
                function toNumberString(num) { 
                   return value.toString() + ".00"
                }
                
                vm.order[test] = toNumberString(value);
                console.log(value);
                console.log(vm.order);
          }
        }
    }
        
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="admin">

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="test as vm">
    <div class="col-md-4">
      {{vm.order}}
      <div class="form-group">
        <label class="control-label">A</label>
        
        <input type="text" class="form-control" ng-blur="vm.cleanNumbers('A')" ng-model="vm.order.A" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label class="control-label">B</label>
        <input type="text" class="form-control" ng-blur="vm.cleanNumbers('B')" ng-model="vm.order.B" />
      </div>
    </div>
  </body>

</html>

＆＃13;

请在SNIPPET上方运行

HERE IS A WORKING DEMO

Answer 2

首先，我建议您使用最新版本的AngularJS（目前为1.6.2）。还有一些错误修复和良好的更改。

其次你正在使用＆＃34; vm＆＃34;控制器前缀，但你不是说你的控制器绑定器。在你的public class MainActivity extends AppCompatActivity { Resources resources; @Override protected void onCreate(Bundle savedInstanceState) { int themeResId = getResources().getIdentifier("AppTheme", "style", "com.example.theme"); if (themeResId != 0) { setTheme(themeResId); } super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public Resources getResources() { if (resources == null) { try { resources = getPackageManager().getResourcesForApplication("com.example.theme"); } catch (PackageManager.NameNotFoundException e) { resources = super.getResources(); } } return resources; } }（plunkr）这一行;

index.html

我是否相信;

<body ng-controller="test">

此外，即使这不是处理你想要做的实际行为，但我确定你可以自己解决剩下的问题。

输入不会使用ng-blur更新onblur

2 个答案: