質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

1回答

2396閲覧

フォームで既存のSELECTボックスを利用する場合のAngularJs対応

landy77

総合スコア1614

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2015/09/12 03:22

お世話になります。
AngularJs 1.4を利用しております。
AngularとJavascriptとしての話か混ざりますが相談に乗って頂けたらと思います。

社内用のWEBアプリみたいな既存の物を今回私が保守を受け継ぐ形で徐々にAngularJs等に変更してるような感じです。

検索用のフォームとしまして検索条件用の数十個のSELECTとフリーワードのテキストボックスを配置してあります。

html

1<select name="sch_cate" ng-model="sch.cate"> 2 <option value="" >カテゴリを選択して下さい</option> 3 <option value="1" >カテゴリ1</option> 4 <option value="2" >カテゴリ2</option> 5 <option value="3" >カテゴリ3</option> 6</select>

実際はこんな感じでSELECTがいくつもあって、一番下に検索実行用のボタンが付いている状態です。

主な質問としてはAngularを追加で利用する場合で、SELECTの部分を作り直す訳にはいかない場合、どの様にするのがスマートなんでしょうか?と言う話です。

SELECTのOPTION部分はAngularJsではなく、既存の為、PHP側でOPTIONを作成した物をSMARTYプラグインとした物で呼び出しています。

コードでは初期値として「””」を指定してあり、Angular側で

javascript

1$scope.sch = {};

とやっておけば「カテゴリを選択して下さい」が選択されます。
で、取得の際に一度も触らずにそのままだと$scope.sch.cateがundefinedになります。
それだけなら気にしないのですが、例えば一度「カテゴリ1」を選択してから「カテゴリを選択して下さい」に選び直すと、今度は「""」として取得されます。
ですので、この形で検索条件を指定してない事を知りたい場合、undefinedか空文字かで判定しないといけないと言うことだと思います。

で今度は

html

1 <option value="0" >カテゴリを選択して下さい</option>

こうすると、画面が読み込まれた時点では空白?が選択されます。

javascript

1$scope.sch.cate="0";

と初期値を代入しておけば当然初期値として選択されますが全てのSELECTに対して書く必要がありますよね?

AngularJsでのngOptionを使わないからこうなるのかなとも思いますが、今回は保守の意味合いの強い案件で、選択用のSELECTもあちこちに散らばってるので、あまり根本的な所に手を入れたく無いなぁという思いがあります。

そもそもしたいことは検索ボタンがクリックされた際に、そもそも検索条件を指定しているのかとかを知りたいだけなんです。
で上記のやり方でコードその物は問題なく記述出来ますし、動作します。
ただAngularJsを使いたい場合どうするのがスマートでしょうか?という事です。
話がまとまらなくてすみませんが宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

selectのvalueの値の件はともかくとして、もともとの目的が、検索条件が選択されていない場合は検索ボタンを押せないようにした、ということであれば、検索ボタン側に ng-disable を設定する方法はいかがでしょう。
例えば・・・

html

1<button type="button" ng-disable="!sch.cate">検索</button>

投稿2015/09/29 13:21

tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問