セレクトボックスの選択を動的に変えたい
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 7,282
AngularJSで、ng-modelをchoiceに指定したセレクトボックスの選択を動的に変えたいと思っています。
いろいろやりましたが、駄目でした。
たとえば、インデックスを2にしたくて以下のようにしました。セレクトボックスはリストに10件以上入っています。
$scope.choice.options[2].selected=true;
$scope.choice.selectedIndex=2;
visualstudio2015でwebアプリケーションを指定して新規作成して、上のコードを確認して見ると（マウスポインタを重ねて見ると）undifindedとなっています。
$scopeを使ってng-modelを使ってのセレクトボックスの参照の仕方が解ってないんだと思いますが、どのようにセレクトボックスを参照して、セレクトボックスの選択を動的に変えたら良いのでしょうか？
僕が検討したのはインデックスですが、セレクトボックスの価、テキストでも指定できるのなら教えていただきたいです。
よろしくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
choiceオブジェクトがどのような構造になっているのか不明なので、ピンポイントの回答になっていないかもしれませんが・・・。
ng-model を使った select の自動選択の例です。
<button ng-click="selected_abc = 'a'">select A</button><br>
<button ng-click="selected_abc = 'b'">select B</button><br>
<button ng-click="selected_abc = 'c'">select C</button><br>
<select ng-model="selected_abc">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<div>{{selected_abc}}</div>そして、option をオブジェクト配列から自動生成する例です。
<p ng-repeat="user in users" ng-click="p_click(user)">{{user.name}}</p>
<select ng-model="selected_user" ng-options="user.name for user in users"/></select>
<div>selected_user: {{selected_user.name}}</div>$scope.users = [
{name:'Taro', gender:'male'},
{name:'Hanako', gender:'female'},
{name:'Kaori', gender:'female'},
{name:'Kenji', gender:'male'},
{name:'Sakura', gender:'female'},
];
$scope.p_click = function(user) {
$scope.selected_user = user;
}ご参考になれば。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
AngularJSを使ったことがないのですが、単純にjavascriptでオプションを動的に変えたい場合
<select id="hoge">
とidの値がhogeである前提で
function changeOption(val){
var select_option = document.getElementById('hoge').getElementsByTagName('option');
for(i=0; i<select_option.length; i++){
if(val == select_option[i].value){
select_option[i].selected = true;
break;
}
}
}
changeOption('ほげ');
としてあげればvalue="ほげ"のoptionが選択されると思います。
実際のコードがないので推測になりますが・・・
http://qiita.com/zuzu/items/8af0da17849cd17d3949
などで少し調べてみた限りでは$scope.choiceはoption要素ではなくoption要素を生成するための配列になっていないでしょうか。
その場合$scope.choiceを使って動的に選択を変更するのは無理だと思います。
※上記URLで紹介されているのはあくまでもデフォルト値の設定ですので、後から動的に変更するのとは違う話しになります。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/19 23:53
ありがとうございました。