興味を持ったこと
人工筋肉
ionicアプリでAngularJSチェックボックスから値を読み込む
時系列
問題:
値を取得できない
できていなかったこと
1:type=submitのボタンをフォームタグで囲っていなかった
2:渡したい値の定義方法が違った
contact.UIDではなくcontact.contactUID
ー
問題:デバッグのために選択した値を値をconsole.logで表示する
1: [object Object] や空欄が表示される
2: How can I display a JavaScript object? - Stack Overflow
すると意味不明な文字列("entire object"オブジェクト全体)がプリントされるが
その中に checkboxで指定しているvalueがない
on; 1: on; length: 2; prevObject: [object Object]; jquery: 3.1.0; constructor: function (a,b){return new r.fn.init(a,b)}; toArray: function (){return f.call(this)}; get: function (a){return null!=a?a<0?this[a+this.length]:this[a]:f.call(this)}; pushStack: function などと続いている
3: jQueryでチェックボックスのチェック済みの値のみを取得 - MasKのpermission denied.
on,onと表示される
解決
ion-checkboxではなくてinput style="checkbox" としたら洗濯した値がvalue=""の中身となった。
tocheck
Ionic/AngularJS checkbox and ng-repeat from API - Stack Overflow
javascript - How to bind to list of checkbox values with AngularJS? - Stack Overflow
【jQuery】チェックされたチェックボックスを取得する - Qiita
ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 - Qiita
メモ:
jQueryは値の取得は先頭のものだけが対象になるのが普通で、 .val()
もそう。
全部取るために、 .map()
でループします。
1 |
< form id = "my-form" > |
2 |
< input type = "checkbox" name = "my-checkbox" value = "A" /> |
3 |
< input type = "checkbox" name = "my-checkbox" value = "B" checked /> |
4 |
< input type = "checkbox" name = "my-checkbox" value = "C" checked /> |
5 |
</ form > |
1 |
var $checked = $( '#my-form [name=my-checkbox]:checked' ); |
2 |
var valList = $checked.map( function (index, el) { return $( this ).val(); }); |
3 |
console.log(valList); // => ["B", "C"] |
複数あるかもなので、値も配列に詰めてます。
あ、 .map()
の使い方は解説しないので、わからない人は探してみてくださいね。
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
var checkedSeasons = []; $('[name="seasons"]:checked').each(function(){ checkedSeasons.push($(this).val()); });http://codenote.net/javascript/jquery/2250.html |
[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法 | CodeNote.net
フォームの中でない場合:
console.log
アプトプットが[object Object]になってしまうときの対処除法
ionicでフッターを二つ作りたいとき
成功:
bar-subfooter
bar-footer
の使い分け
失敗:
divをion-contentに入れる
footer-barにdivやrowを二つ入れる
サブフッターをfloat、clearする
<br>を使う
rangeslider.jsをカスタマイズする
使うもの
カスタマイズ例を見てもCSSが当たらなかった
原因
・ブラウザでCSS変数の使用ができなかった
・SCSS, SASSフォーマットからうまく変換できなかった
・rangeslider.cssを読み込めてなかった
・rangesliderをJavaScriptでinitializeできていなかった
Building out your app - Ionic Framework
AngularJSのControllerとScopeの基礎を学ぼう | HTML5Experts.jp
解決策
ブラウザのInspectorでチェックしながらCSSで上書き
見たけど応用できなかったもの
ログスケールの円形ナンバーピッカーを作る
材料:
注意:
年間1万円程度の年会費がダウンロードに必要 GreenSock | ThrowPropsPlugin
実装した後
ドラッグ中、ドラッグした後の地点でのポジションの値を返す:
目もりをログスケールにする:
他の材料:
Spinning wheel javascript · GitHub
GitHub - zarocknz/javascript-winwheel: Create spinning prize wheels on HTML canvas with Winwheel.js