質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

1回答

1260閲覧

Onsen UI のスライドバー(ons-range)の値を取得したい。

raipniz

総合スコア10

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2018/11/21 14:48

前提・実現したいこと

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が働いていないことはないと思います。

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こんな感じかな

html

1<!doctype html> 2<html> 3<head> 4 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 5 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> 7 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 8 <script src="https://unpkg.com/onsenui/js/angular-onsenui.js"></script> 9</head> 10<body> 11 <ons-page> 12 <p> 13 <ons-row ng-init="volume = 0; brightness = 0; approval = 0"> 14 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 15 <ons-icon icon="md-volume-down"></ons-icon> 16 </ons-col> 17 <ons-col> 18 <ons-range style="width: 100%;" ng-model="volume" max="20"></ons-range> 19 </ons-col> 20 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 21 <ons-icon icon="md-volume-up"></ons-icon> 22 </ons-col> 23 </ons-row> 24 <ons-row style="margin-top: 20px;"> 25 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 26 <ons-icon icon="md-brightness-low"></ons-icon> 27 </ons-col> 28 <ons-col> 29 <ons-range style="width: 100%;" ng-model="brightness" max="20"></ons-range> 30 </ons-col> 31 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 32 <ons-icon icon="md-brightness-high"></ons-icon> 33 </ons-col> 34 </ons-row> 35 <ons-row style="margin-top: 20px;"> 36 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 37 <ons-icon icon="md-thumb-down"></ons-icon> 38 </ons-col> 39 <ons-col> 40 <ons-range style="width: 100%;" ng-model="approval" max="20"></ons-range> 41 </ons-col> 42 <ons-col width="40px" style="text-align: center; line-height: 31px;"> 43 <ons-icon icon="md-thumb-up"></ons-icon> 44 </ons-col> 45 </ons-row> 46 </p> 47 <h4>Volume: {{volume}} | Brightness: {{brightness}} | Approval: {{approval}}</h4> 48 </ons-page> 49</body> 50<script> 51ons.bootstrap(); 52</script> 53</html>

投稿2018/12/03 08:27

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問