角インチのフィルターを使用したmm - インチのコンバーター

Question

幅と高さに寸法を入力する必要があるUIがあります。

私は2つのボタンを持っています.1つは「mm」に1つは「インチ」に1つです。これらのボタンを押すと、最初にアクティブなクラスをデフォルト（mm）からインチ（動作している）に変更する必要があります。

また、フィールドアイコンを「mm」から「インチ」（動作しています）に更新する必要があります。

フィルタを使用していますが、私はそれをクリックするだけで動作させる必要があります。コントローラ上にオンクリックで実行され、ボタンとフィールドアイコンのアクティブクラスを更新します$scope.activeUnit = currentUnit。フィルタコード以下である：

.filter('convertUnits', function() { 
    return (function (unit) { 
     if (unit == 'inches') { 
      return Math.floor(input * 0.0393701); 
      console.log('hello-inches'); 
     } 
     else if (unit == 'mm') { 
      return Math.floor(input/0.0393701); 
      console.log('hello-mm'); 
     } 
    }); 
}) 

にクリックイベント走る機能以下である：私はこれが私のコントローラで私の上のクリック機能で実行され、いずれかを変換したいのです

$scope.changeUnits = function(unit) { 
     $scope.activeUnit = unit 
     console.log(unit); 

     // Run filter code here? 
     // Update all mm to inches on the view and vice versa 
    } 

ビューの寸法をインチにして、mmをクリックして戻し方を変換します。

これを実行して実行するための助けがあれば幸いです。

Answer 1

テンプレートのフィルタにパラメータとしてactiveUnitを渡すのは正しく機能するはずですか？あなたはそれを試しましたか？ activeUnitを変更すると自動的にバインディングで値を更新する必要があります。

<span ng-bind="length | convertUnits : activeUnit"></span> 

<span>{{length | convertUnits : activeUnit}}/span> 

カスタムフィルタには1つのパラメータがありません。返品後のconsole.logも動作しません。

---

.filter('convertUnits', function() { 
    return (function (input, unit) { 
         ----^ 

しかし、あなたがモデルで同じ値を維持し、単に単位を変更している、それが混乱することができます。

value = 10 
unit = mm 

value = 10 
unit = inches 

あなたは、その値が常にmmかinchesのいずれかになります決定しない限り、それは間違っていると混乱のデータとすることができます。あなたは元の要件の物事がより明確になる記述することができるかどう

であってもよいです。

1. ユニットを切り替えて表示できる固定値が表示されていますか？
2. ユーザーが任意の単位で値を入力できる入力フィールドがありますか？