AngularJSモデル値を変換する

Question

Formlyを使用して入力ページを作成していますが、現在作成しているタイプやラッパーをテストできる簡単なテストページが用意されています。

それが現在のように定義されています、

HTML：

<div data-ng-controller="npTestingCtrl as vm" style="height:100%"> 
    <formly-form form="vm.form" model="vm.model" fields="[ 
    { 
     key: 'things', 
     type: 'checkedListBox', 
    }]"></formly-form> 
</div> 

コントローラー：

(function() { 
    'use strict'; 

    angular.module('app.testing').controller('npTestingCtrl', npTestingCtrl); 

    npTestingCtrl.$inject = []; 
    function npTestingCtrl() { 
    var vm = this; 
    vm.model = { 
     things: { } 
    } 
    }  
})(); 

は、私は、次のように "にCheckedListBox" タイプを宣言した：

タイプ：

指令：

angular.module('app.formly.checkedListBox').directive('npCheckedListBox', function() { 
    return { 
    restrict: 'E', 
    scope: true, 
    templateUrl: 'checkedListBox.html', 
    link: function (scope, element, attr) { 
     scope.items = [{ identifier: 13, text: 'Tom' }, { identifier: 57, text: 'Dick' }, { identifier: 4, text: 'Harry' }]; 
    } 
    } 
}); 

指令HTML：

angular.module('app.formly.checkedListBox', ['formly']) 
    .run(function (formlyConfig) { 
    formlyConfig.setType({ 
     name: 'checkedListBox', 
     template: '<np-checked-list-box></np-checked-list-box>' 
    }); 
    }); 

ディレクティブ 'NP-にチェックリストボックス' は、として宣言されています

<div style="overflow-y:auto;height:{{to.height == undefinied ? 350 : to.height}}px"> 
    <div class="checkbox" ng-repeat="item in items"> 
     <input id="{{options.id}}_{{item.identifier}}" 
       type="checkbox" 
       ng-model="model[options.key][item.identifier]" 
       value="{{item.checked}}"> 
     <label for="{{options.id}}_{{item.identifier}}">{{item.text}}</label> 
    </div> 
</div> 

これは正しく動作しています。チェックボックスをクリックすると、モデル内のオブジェクトにプロパティが追加されます。値はtrueまたはfalseです。

things: { 
    13: true, 
    57: false 
} 

ここで、物事オブジェクトを、真であるアイテムだけを格納する配列に変換したいと思います。例えば。私は、サーバーに投稿できる一連の識別子で終わりたいと思っています。

このタイプは複数の場所で使用されるため、コンバージョンロジックは1回だけ必要です。これまで私のFormlyテンプレートを変更しようとしているディレクティブに：

<np-checked-list-box ng-Model="model[options.key]"></np-checked-list-box> 

私はその後、$フォーマッタと$パーサの両方に機能を追加し、指示にngModelCtrlを注入しました。しかし、関数は呼び出されないので、値を操作することはできません。これは、オブジェクト自体が変更されていないため、プロパティが追加されているか、変更されているためです。

私は可能なことをしようとしていますが、もしそうなら、私はそれを機能させるために変更する必要がありますか？

私の説明したようにモデルバインディングを変更する方法はありますか？私は次のことを行って、最後にこの遭遇誰のためのFYI

Answer 1

：例えば

vm.model = { 
    things: [] 
    } 

：

に私のテストコントローラのモデルを修正オブジェクトから配列に物を回します。データ-NG-モデル= "モデルは[options.key]" に直接結合され

<div style="overflow-y:auto;height:{{to.height == undefinied ? 350 : to.height}}px"> 
    <div class="checkbox" ng-repeat="item in items"> 
     <input id="{{options.id}}_{{item.identifier}}" 
       type="checkbox" 
       value="{{item.checked}}" 
       data-ng-model="model[options.key]" 
       data-np-checked-list-box-item 
       data-np-checked-list-box-item-identifier="{{item.identifier}}"> 
     <label for="{{options.id}}_{{item.identifier}}">{{item.text}}</label> 
    </div> 
</div> 

お知らせ：へ 'NP-にチェックリストボックス' ディレクティブのHTML修正

配列内の要素ではなく配列を返します。また、別のディレクティブ 'data-np-checked-list-box-item'とそれが使用する属性 'data-np-checked-list-box-item-identifier'を追加しました。

新しいディレクティブが作成した「データ-NP-にチェックリストボックス項目」：ディレクティブは、それぞれの配列識別子ごとに（例えば単なるラッパーが

angular.module('app.formly.checkedListBox').directive('npCheckedListBoxItem', function() { 
     return { 
      require: 'ngModel', 
      restrict: 'A', 
      scope: { 
       identifier: "@npCheckedListBoxItemIdentifier" 
      }, 

      link: function (scope, element, attr, ngModelCtrl) { 
       var model = []; 
       ngModelCtrl.$formatters.push(function (modelValue) {      
        model = modelValue; 
        return model[scope.identifier] == true; 
       }); 
       ngModelCtrl.$parsers.push(function (viewValue) { 
        if (viewValue) { 
         model.push(scope.identifier); 
        } else { 
         for (var i = model.length - 1; i >= 0; i--) { 
          if (model[i] == scope.identifier) { 
           model.splice(i, 1); 
           break; 
          } 
         } 
        }  
        return model; 
       }); 
      } 
     } 
    }); 

ですチェックボックス）は、配列に一致する識別子がある場合はtrueを返し、そうでない場合はfalseを返します。

モデルを更新すると、チェックボックスをオンにすると識別子が配列に追加され、チェックを外すと識別子が削除されます。

など。 "Tom"と "Dick"のチェックボックスがオンの場合、私のモデルはそのように見えます。

model: { 
    things: ["13", "57"] 
} 

これはエントリを文字列として格納していますが、私の目的上、これは問題ありません。