Question

我有一个包含多个货币值输入字段的表单，我有一个指令，它将货币值限制为像空格一样输入，例如USD 100.但我需要拆分模型值并分隔货币和数字并存储它在同一个模型对象中。因此，100美元可以分为，美元，100整数

screen -S dracos -p $n -X stuff "<your_new_command_here>

这应该变为

$scope.formData = {
  Fee : "USD 100"
 }

表单中还有多个字段以及其他类型的数据。请帮助我解决我可以通过服务或指令实现此问题的任何想法，以便我可以轻松地应用于所有类似的字段。

Answer 1

这是使用指令执行此操作的一种方法。我在这里做了很多假设，这不是生产有价值的代码，但它应该为你提供一个基础。基本上，您将对象传递给指令，然后在该对象上查看属性以进行更改。属性更改时，您可以拆分空格字符并在对象上填入适当的值。因为它是一个指令，你可以在任何地方使用它。

JS

angular.module('app', [])
    .controller('ctrl', function($scope) {
        $scope.feeData = {
            fee: 0,
            feeCurrency: 'N/A',
            value: ''
        };
    })
    .directive('feeDirective', function() {
        return {
            restrict: 'A',
            scope: {
                feeData: '='
            },
            link: function(scope, element, attrs) {
                scope.$watch('feeData.value', function(newValue, oldValue) {
                    console.log(newValue);
                    var data = newValue.split(' ');
                    if (data.length === 2) {
                        console.log(data);
                        scope.feeData.fee = data[0];
                        scope.feeData.feeCurrency = data[1];
                    }
                }, true);
            }
        }
    });

HTML 的

<div ng-app="app" ng-controller="ctrl">
    <div>
        <input type="text" ng-model="feeData.value" fee-directive fee-data="feeData">
    </div>
    <div>
        Value: {{feeData.value}}
        <br/> Fee: {{feeData.fee}}
        <br/> Currency: {{feeData.feeCurrency}}
    </div>
</div>

Working JSFiddle说明了上述代码。

如何拆分输入模型字符串值并将值存储为模型对象中的单独属性

1 个答案: