お世話になります。
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を使いたい場合どうするのがスマートでしょうか?という事です。
話がまとまらなくてすみませんが宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。