セレクトボックスの選択を動的に変えたい

Question

AngularJSで、ng-modelをchoiceに指定したセレクトボックスの選択を動的に変えたいと思っています。
いろいろやりましたが、駄目でした。

たとえば、インデックスを2にしたくて以下のようにしました。セレクトボックスはリストに10件以上入っています。
$scope.choice.options[2].selected=true;
$scope.choice.selectedIndex=2;

visualstudio2015でwebアプリケーションを指定して新規作成して、上のコードを確認して見ると（マウスポインタを重ねて見ると）undifindedとなっています。

$scopeを使ってng-modelを使ってのセレクトボックスの参照の仕方が解ってないんだと思いますが、どのようにセレクトボックスを参照して、セレクトボックスの選択を動的に変えたら良いのでしょうか？

僕が検討したのはインデックスですが、セレクトボックスの価、テキストでも指定できるのなら教えていただきたいです。

よろしくお願いします。

Answer 1

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;
}

ご参考になれば。

Comments

[chintao1224]

実現したかったことが出来ました。
ありがとうございました。

Answer 2

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で紹介されているのはあくまでもデフォルト値の設定ですので、後から動的に変更するのとは違う話しになります。

Comments

[chintao1224]

javascriptの勉強になりました。
ありがとうございました。