0

問題空間

フォーム送信ボタンではなく、満たされた基準に基づいてフォームを送信するという問題があります。

3 つのドロップダウンがあるとします。最初の 2 つはグループ化されていますが、1 つを選択する必要があります。つまり、どちらかを選択できますが、空のままにすることはできません。3 つ目は必須フィールドです。

その後、ページは自動的に結果を取得します。

チェックボックスとさらにいくつかのドロップダウンがあるとしましょう。前述の 3 つのドロップダウン、チェックボックス、およびドロップダウンで今後選択すると、結果が自動的にフィルタリングされます。

私が知っていること

角度のあるドキュメントを読んだ後、$dirty、$pristine、および $setDirty と $setPristine などの両方の操作を調べていました。ただし、これはFormController用のようです

したがって、これはスコープ全体に役立つと思います。選択したスコープについて把握できる傾向は見られませんでした。

私がこれまでに持っているもの

基本的に、スコープの追跡機能を利用したいと思っていましたが、それについてはよくわかりません。自分のアプリケーション用に 1 つのコントローラーと 1 つのスコープを作成しました。次のようなスコープで役割を果たすサードパーティのプラグインがあります。

$scope.3rdpartyConfig = { prop1: [], prop2: getData() }

フォームの $dirty 状態をチェックする場合、フォームの送信をチェックするのにそのようなものは役に立たないと思います。

それから、私は物事を行うために使用されていた古い方法について考えましたが、それを「角度化」しました。

だから私は次のようなものがあります：

<input type="checkbox" ng-model="state.Checked" ng-change="checkIfWeCanSubmitThenSubmit()" id="ng-change-example1" />

したがって、html フォーム全体で ng-changes と ng-clicks が発生し、その関数にヒットします。関数は次の擬似コードのようになります。

$scope.checkIfWeCanSubmitThenSubmit= function() {
    var validated = false;
    //check to see if dropdown1 or dropdown2 are selected
    //check to see if dropdown3 is selected
    // add more here per requirement

    //if the above are true, then validated = true

    if (validated)
    {
         //add dropdown4 and 5, and checkbox groups into filter
    }

    submit();
}

しかし、これは確かに容易ではないので、これは物事を行う角度のある方法ではないと考えていました。

データを送信してフェッチする前に、スコープのどの部分が汚れているかを確認できる、またはこの関数をすべての html に追加するよりも良い方法があるかどうかを確認できる、スコープが何らかの方法を提供することを望んでいました。エレメント; 私がチェックして見ることができるある種のスコープトラッカーを持っているようなものです。

そういえば、一連の $scope.$watch も必要ありません。ただ、スコープを監視する方法がない限り、HTML コードのすべての部分にバインドするにはあまりにも多くの作業が必要になるからです。特定のスコープ変数のコレクションであれば、気にしません。

のように (疑似コードを許してください):

$scope.$watch('dropdown1, dropdown2, dropdown4', function(dirty, pristine)
{
    if (dirty)
    { blah blah blah }
});

編集 (2013 年 2 月 28 日):

私はこのようにしてみました：

$scope.masterCriteria =
[
    { DropDown1: $scope.AppModel.Dropdown1},
    { DropDown2: $scope.AppModel.Dropdown2 },
    { DropDown3: $scope.AppModel.Dropdown3 },
    { Checkbox1: $scope.AppModel.Checkbox1 },
    { Checkbox2: $scope.AppModel.Checkbox2 }
];

$scope.$watch('masterCriteria', function (newVal) {
    if (newVal) { logger.info("did I change?"); }
}, true);

ウォッチャーは何も検出せず、AppModel のスコープに変更した値は $watch で取得されませんでした。まだこれを理解しようとしている、試してみる価値がありました。

4

1 に答える 1