如何拆分輸入模型字符串值並將值存儲爲模型對象中的單獨屬性

我有一個具有多個貨幣值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「，是否有一種方法可以在同一個指令中執行這兩個操作 –

如何拆分輸入模型字符串值並將值存儲爲模型對象中的單獨屬性

回答

相關問題