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

我有一个具有多个货币值inputfields的表单，并且我有一个指令，该指令限制货币值输入为空间类型，例如USD但是，我需要拆分模型值并分离货币和数量，并将其存储在相同的模型对象中。因此，100美元可以分裂成，美元，100整数如何拆分输入模型字符串值并将值存储为模型对象中的单独属性

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

这应该成为为

$scope.formData = { 
fee : 100, 
feeCurrency : USD 
}

有形式多个字段与其他类型的数据also.Please帮助一起我有任何想法，我可以通过服务或指令实现这一点，以便我可以轻松地应用到所有类似的领域。

来源

2016-07-07 Santhosh kiran Gudla

它总是会是'Fee' =>'fee'和'feeCurrency'吗？ – Lex

只是一个例子，有几个不同名称的字段，用户必须输入100美元的格式。是的，总是将货币添加到字段名称费用=>费用和费用Currency.please帮助 –

下面是一种方法，你可以通过指令来做到这一点。我在这里做了很多假设，这不是生产值得的代码，但它应该给你一个开始的基础。基本上，您将该对象传递给该指令，然后观察该对象上的属性以进行更改。当属性更改时，您可以拆分空格字符并在对象上填写适当的值。既然这是一个指令，你可以在任何地方使用它。

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示出上面的代码。

来源

2016-07-07 16:36:10 Lex

感谢您的回复@Lex ，你可以请建议，如果我可以传递输入元素模型名称，以使它更通用？ –

@SanthoshkiranGudla你可以从传递给'link'函数的'attrs'集合中获得它。 'attrs.ngModel'。如果你需要访问实际对象，那么在指令中添加'require：'ngModel''，然后''ngModel'作为链接函数的第四个参数，并且你可以完全访问对象，所以你可以检查合法性等 – Lex

谢谢你，但我想重新使用表格来加载服务器的数据，其中包括两个分开的值，我需要结合货币代码和数字显示给单个现有字段中的用户为“美元100“，是否有一种方法可以在同一个指令中执行这两个操作 –

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

回答

相关问题