Formlyを使用して入力ページを作成していますが、現在作成しているタイプやラッパーをテストできる簡単なテストページが用意されています。AngularJSモデル値を変換する
それが現在のように定義されています、
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
サービス内で変数を使用し、ディレクティブ( 'scope。$ watch'またはformly' watchers'を介して)のモデル変更を監視し、それに応じてサービス変数を更新することができます – cl3m