onsen UI のselectを設定をしたい

ons-selectを使用して作成したselect boxに初期項目の設定をしたいのですが、方法がわかりません。

【html】
<ons-select id="cyueki-sel" ng-model="cyueki_sel" ng-change="page.editSelects()">

これにidの内容に合致したものに設定をさせたい

【JS】
下記を試してみました。
１）getElement
var elem = document.getElementById('cyueki-sel');
var elems = elem.options;
elems[2].selected = true;

先頭の項目にセットされてしまいました。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ng-repeatなどを使ってるということで、OnsenUI+Angular1を利用してる想定で

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6<link rel="stylesheet" type="text/css" href="https://unpkg.com/onsenui/css/onsenui.css">
7<link rel="stylesheet" type="text/css" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
8
9<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
10<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
11<script src="https://unpkg.com/onsenui/js/angular-onsenui.js"></script>
12<script>
13// OnsenUI準備完了
14ons.bootstrap()
15  .controller('PageController', function() {
16    this.selectedModifier = 'basic';
17    this.optionList = [
18      {'id': 'basic', 'name': 'ベーシック'},
19      {'id': 'material', 'name': 'マテリアル'},
20      {'id': 'underbar', 'name': 'アンダーバー'},
21    ];
22    this.editSelects = function() {
23      alert("Changed :)" + this.selectedModifier);
24      document.getElementById('choose-sel').removeAttribute('modifier');
25      if (this.selectedModifier == 'material' || this.selectedModifier == 'underbar') {
26        document.getElementById('choose-sel').setAttribute('modifier', this.selectedModifier);
27      }
28    }
29    this.click = function() {
30      // モデルに値を入れると選択肢も変わる・・・がng-changeは呼ばれないので呼び出し先を直接実行
31      this.selectedModifier = 'material';
32      this.editSelects();
33    }
34});
35</script>
36</head>
37<body>
38
39<ons-page  ng-controller="PageController as page">
40  <ons-toolbar><div class="center">Select Input</div></ons-toolbar>
41  <div style="margin: 10px">
42    <p>Choose which select input you want to see:<p>
43    <ons-select
44      ng-model="page.selectedModifier"
45      id="choose-sel"
46      ng-change="page.editSelects()"
47    >
48      <option ng-repeat="option in page.optionList" value="{{option.id}}" ng-selected="{{page.selectedModifier == option.id}}">{{option.name}}</option>
49    </ons-select>
50    <p>Modifier <strong>{{ page.selectedModifier }}</strong> looks great.</p>
51    <button ng-click="page.click()">ボタン</button>
52  </div>
53</ons-page>
54
55</body>
56</html>