0

チェックボックスに基づいてセクションを読み取り専用にしたい。典型的な例は、主要な住所と請求先住所です。ユーザーはプライマリ アドレスを入力し、プライマリ アドレスと同じ請求先住所を選択できます。

たとえば、フィドルを参照してください。

HTML (プライマリ アドレス):

<fieldset ng-model="primaryAdd">
                    <legend>Primary Address:</legend>
                    House#: <input type="text" ng-model="primaryAdd.houseNum"><br>
                    Street: <input type="text" ng-model="primaryAdd.street"><br>
                    State: <input type="text" ng-model="primaryAdd.state"><br>
                    Zip: <input type="text" ng-model="primaryAdd.zip">
</fieldset>

HTML（アドレスと同じ）

<input type="checkbox" name="makeSameAsAddress" ng-model="makeSameAsAddressCheck" ng-click="makeSameAsAddress($event)">Same as above<br/>

HTML (請求先住所)

<fieldset ng-model="billingAddress">
                    <legend>Billing Address:</legend>   
                    <div>                 
                        <div style="font-size:small">if the address is the same as residence, prefill and make it readonly</div>
                        House#: <input type="text" ng-model="billingAddress.houseNum" ng-readonly="makeSameAsAddressCheck"><br>
                        Street: <input type="text" ng-model="billingAddress.street" ng-readonly="makeSameAsAddressCheck"><br>
                        State: <input type="text" ng-model="billingAddress.state" ng-readonly="makeSameAsAddressCheck"><br>
                        Zip: <input type="text" ng-model="billingAddress.zip" ng-readonly="makeSameAsAddressCheck">
                    </div>
                </fieldset>

フィドルは機能します。「上記と同じ」チェックボックスをクリックすると、請求セクションはプライマリセクションからアドレスを取得し、読み取り専用になります。問題は、フィールドセットまたは入力を囲む div に ng-readonly を配置できない理由です。すべての入力に ng-readonly を配置する必要があります。これを行うためのより良い方法がなければならないと感じています。

「makeSameAsPrimaryAndReadOnly」というディレクティブを作成する必要があるかもしれません。ビジネス ロジックは、直接 HTML やコントローラーではなく、ディレクティブに配置する必要があることを読みました。しかし、私はこれを行う意味がわかりません。請求先住所を複数の場所で再利用していない限り。

第二に、モデルを初期化し、スキーマを他のコントローラーなどと共有するのに適した場所はどこですか? これには工場が最適だと思いますか？ありがとうございました。

角岩!!

4

1 に答える 1

0

ディレクティブを作成することもできますが、この目的にはやり過ぎかもしれません。

css スタイルのように ng-readonly を div またはフィールドセットに適用することはできません。正直なところ、入力が 4 つしかない場合でも、それほど悪くはないと思います。

ウォッチ式を使用して、チェックボックスのロジックを簡素化 (および ng-click イベントを排除) できます。

$scope.$watch('makeSameAsAddressCheck', function (newv, oldv) {
    if (newv) 
        $scope.billingAddress = $scope.primaryAdd;
    else if (newv !== oldv)
        $scope.billingAddress = angular.copy($scope.primaryAdd);           
});

チェックボックスをオンにすると、両方のスコープ変数が同じオブジェクトを参照するように設定されていることに注意してください。これで、メインの住所を変更すると、請求先住所が自動的に更新されます。

チェックボックスをオフにすると、プライマリ アドレスのコピーが作成されます。個別に編集できるようになりました。

http://jsfiddle.net/fcSgz/

コントローラーでのビジネス ログインは問題ありません。実際、それはあるべき場所です。

「factory」関数で作成されたサービスでモデルを初期化できます。

于 2013-05-14T02:38:01.960 に答える