前提・実現したいこと
Monaca における開発において Onsen UI の ons-range のスライドバーから値を取得したい。
https://onsen.io/v2/api/angular1/ons-range.html
上記のURLのリファレンス通りに実装したのですが、実際にスライドバーを動かしてみると
volumeやbrightnessの値が ng-init で指定した初期値から変動しません。
どう改善したら ons-range 内のng-modelを取得させることができるのでしょうか。
ご回答宜しくお願い致します。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<div class="test" ng-app> <p > <ons-row ng-init="volume = 0; brightness = 0; approval = 0"> <ons-col width="40px" style="text-align: center; line-height: 31px;"> <ons-icon icon="md-volume-down"></ons-icon> </ons-col> <ons-col> <ons-range style="width: 100%;" ng-model="volume" max="20"></ons-range> </ons-col> <ons-col width="40px" style="text-align: center; line-height: 31px;"> <ons-icon icon="md-volume-up"></ons-icon> </ons-col> </ons-row> <ons-row style="margin-top: 20px;"> <ons-col width="40px" style="text-align: center; line-height: 31px;"> <ons-icon icon="md-brightness-low"></ons-icon> </ons-col> <ons-col> <ons-range style="width: 100%;" ng-model="brightness" max="20"></ons-range> </ons-col> <ons-col width="40px" style="text-align: center; line-height: 31px;"> <ons-icon icon="md-brightness-high"></ons-icon> </ons-col> </ons-row> <ons-row style="margin-top: 20px;"> <ons-col width="40px" style="text-align: center; line-height: 31px;"> <ons-icon icon="md-thumb-down"></ons-icon> </ons-col> <ons-col> <ons-range style="width: 100%;" ng-model="approval" max="20"></ons-range> </ons-col> <ons-col width="40px" style="text-align: center; line-height: 31px;"> <ons-icon icon="md-thumb-up"></ons-icon> </ons-col> </ons-row> </p> <h4>Volume: {{volume}} | Brightness: {{brightness}} | Approval: {{approval}}</h4> </div>
試したこと
いろいろ試しすぎて混乱しています。。。
ng-initなどは反応しているのでAngularJSが働いていないことはないと思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。