ユーザーが ID を入力するテキスト入力フィールドがあるとします。その後、ユーザーは「追加」ボタンをクリックして確認できます。そのボタンをクリックしたら、サーバーに送信リクエストを送信し、「名前」を取得します。次に、テキスト入力フィールドを無効にし、「追加」ボタンを非表示にして、「追加」ボタンがあった場所に数値入力フィールドを表示します。
これをAngularの方法で構造化するにはどうすればよいですか? 私はAngularを使い始めたばかりで、概念には少し慣れていますが、これを正しい方法で考えるのに苦労しています.
これを行うには、ng-show、ng-hide、ng-disabled、および ng-click を使用する必要があります。
覚えておかなければならないことは、コントローラーで DOM を直接編集してはならないということです。既存のディレクティブを使用するか、独自のディレクティブを作成する必要があります。この場合、必要なものはすべてすでに存在しています。
次のようにする必要があります。
<input type="text" ng-model="textValue" ng-disabled="numberValue">
<button ng-hide="numberValue" ng-click="sendData">Send</button>
<input type="number" ng-model="numberValue" ng-show="numberValue">
コントローラーでは、sendData メソッドでサーバーを呼び出し、結果を numberData プロパティに割り当てます。データの読み込み中にボタンを無効にする場合は、サーバーへの呼び出しを開始するときに true に設定され、リクエストのコールバック メソッドで false に設定される 2 つ目のプロパティを追加できます。次に、ボタンのそのプロパティに ng-disabled を追加します。