日々精進

新しく学んだことを書き留めていきます

2015-11-01から1ヶ月間の記事一覧

ng-changeイベントで変更前の値を取る

web

以下の'{{user.id}}'のように、シングルクォートで囲むと変更前の値が取れる。 <select ng-change="updateValue(user, '{{user.id}}')" ng-model="user.id" ng-options="user.id as user.name for user in users"> </select> ng-change標準の機能で取れて欲しい。。 参考: angularjs - ng-change get new value and original value - Stack Overflow

ng-annotateでminifyされても不具合発生しないようにする

web

配列アノテーションを自分で書くのはだるいなと思っていたので丁度よかった。ng-annotateを使うとビルド時に配列アノテーションを挿入してくれる。 使い方は以下サイト参照。 参考: 一日一行: angularでng-annotateを利用してminify対策を自動化する

Angularのdirectiveから親画面にデータを渡す方法

web

これはちょっとトリッキーなので最初ハマりそう。 まずdirectiveの呼び出し側は以下のように書く。 <directive ng-repeat = "item in stuff" callback = "callback(data1, data2)"/> directiveの定義では以下のようにしてcallback関数を受け取る。 scope { callback: '&' } callbackを呼ぶ時は以下のように一つのオブジェクトに引数を入れ</directive>…

labelタグを使ってボタンを実装した場合onblur, ng-blurが効かない

web

bootstrapではlabelタグを使ってボタンをレイアウトすることがある。 下記サイトのButtonの実装例はlabelタグを使っている。 angular-ui.github.io labelタグを使った場合、ナゼかonblur, ng-blurイベントが実行されなくて困った。 以下サイトによるとlabel…

ng-disabled属性はaタグに使ってはいけない

web

理由は、ng-disabled="true"にしてもクリックできてしまうから。 見た目はDisabledになっているのでぱっと見正しく動いてそうなのも困る。。 ng-disabledはbuttonタグであれば正しく動く。 参考:

JavascriptでArrayの要素を削除する

web

このメソッド名がどうも覚えられない。removeかdeleteの方がいいなあ。array.splice(start, length); 参考:

テキストでツリー構造を書く方法

IT

以下のように書く時のEdgeの部分は「けいせん」で変換すると出る。知らなかった。。 るーと ┣━びん ┣┳もじゅーる ┃┗らいぶらり ┗そーす 参考: http://www.wxwxw.com/blog/738/

Typescriptで型情報を保存したままオブジェクトをコピーする方法

web

lodashの_.cloneDeepではプロパティはコピーされるけどprototypeオブジェクトはコピー元と同じものをセットしてくれないので、instanceofの結果がコピー元と違うしメソッドも呼べない。 やりたい場合は自分で手書きするしかなさそう。コピーした後で copy.__…

AngularJSでModal Windowと親画面でデータをやりとりする方法

web

Modalにデータを渡すにはresolveオプションを使う。これで他のServiceなどと同じようにConstructorにInjectionされる。 Modalから親画面にデータを渡すには、Modal側はclose(this.data)のようにcloseまたはdismissの引数として渡す。 親画面側はopenの戻り値…

AngularJSでBootstrapのModal WindowがModal外の領域をクリックされた時に閉じられないようにする

web

以下のようにbackdrop : 'static'オプションを渡せばいい。 $modal.open({ ... backdrop : 'static' }); 参考:

WindowsのSimpleNote ClientはResophNotesが良さそう

IT

SimpleNote ClientはMacではnvALTを使っているけど、WindowsではResophNotesを使っている。 特に問題無く使えてます。Web Clientをしばらく使ってたけどやっぱり使いにくかった。。 参考:

Windowsでローカルリポジトリのマージ済みブランチを一括削除するコマンド

IT

Macだと簡単にできるのにWindowsだと何でこんなに大変なのか。。 コマンドプロンプトでは出来なくて、PowerShellで以下コマンドを実行する必要がある。 git branch --merged | ForEach-Object { $_.Trim() } | Where-Object {$_ -NotMatch "^\*"} | Where-Ob…

JavascriptでArrayにfor...inを使ってはいけない

web

ごく基本的な問題ですが。。 for (var i in array) としてはいけない。これだとiに入るのは配列のIndexを文字列にしたものになる。つまり、"0", "1"...がiに入る。 マジで。。JSのArrayはほんとどうかしてる。内部的には普通のオブジェクトと同じなんだな。 …

JavascriptでFlattenとArrayの結合

web

Flattenは以下のようにする Array.prototype.concat.apply([], twoDimensionalArray); なるほどー。applyにもっと詳しくなりたい。。 結合はconcatを使う。 array1.concat(array2) 参考:

iPhoneはパスコードを10回間違えるとデータが消去される設定がある

IT

子供がiPhoneを触った時にデータが消去されたことがあり、なぜ・・・と思っていたらこういう設定があったんだね。 なぜかONになってた。。この設定をONにして、こまめに自宅のPCにバックアップを取るのが正しい運用だと思うけど面倒でやってない。 参考:

エクスプローラーからフォルダを指定してコマンドプロンプトを開く

IT

フォルダをShiftキーを押しながら右クリックして「コマンドウィンドウをここで開く」を選択すると開ける。 これでcdを使ってフォルダ移動しなくていいぞー 参考:

TypescriptでInner Classを定義する方法

web

以下のようにクラス名と同名のnamespaceを定義する。 declare module a { class b { } module b { class c { } } } そうすると、呼び出し側からは以下のようにInner Classっぽく呼び出せる var myB = new a.b(); var myC = new a.b.c(); バッドノウハウだけ…

Chrome dev toolsのショートカット

web

詳細は下記記事参照。ファイルを開くCtrl+oはIntelliJのCamelHumpsっぽく部分一致でなくファイル名の一部を複数繋げて書いても一致してくれるので便利。 例えば、LoginController.tsだと「locon」と入力しても一致する。「loller」みたいに単語の先頭からで…

IntelliJでブランチの最新版との差分が出なくなる問題

具体的には以下の現象が起きた。 Editorエリアのはじっこ(ガター)のところに更新した行かどうかが表示されなくなる。正確には変更してすぐは表示されるけど、Diskに保存されたら表示されなくなる Version Control windowに変更したファイルの一覧は出るが…

CSSでposition: absoluteを指定している場合、margin-bottom, margin-rightが効かない

web

position: absoluteを指定している場合はmarginの指定にmargin-を除いたtop, bottom, left, rightを使わないといけない。 なので以下のようになる。 position: absolute; bottom: 10px; right: 5px; これなんでだろ。。margin-top, margin-leftは効くのにな…

MacからiPhoneにテザリングしようとしたら「インターネット共有を有効にできませんでした」エラーが出る

IT

以下のサイトに載っているトラブルシューティングを実行してみたがだめだった。 iPhoneを再起動したら直った。なんだったんだ。。

Angular+Bootstrapでモーダルを表示した時に、モーダルから親画面に値を渡す

web

親コントローラ側は以下のようにmodalInstance.resultからPromiseを取得できるのでCallbackを実行して値をもらう。 modalInstance.result.then((result) => {...}); モーダル側は$modalInstance.close();を呼ぶとsuccess callbackば呼ばれ、 $modalInstance.…

Bootstrapのtableのcell内を上下中央寄せにする

web

Bootstrapがvertical-align:topを設定しているのでそれを打ち消す設定をする。 以下の例ではクラスをつなげているがこれは詳細度を上げてBootstrapのスタイルを打ち消せるようにするため。 .td_vertical_align_middle.td_vertical_align_middle { vertical-a…

CSSで文字列を折り返す

web

word-breakプロパティを使うが、word-break: normalだと長い英単語が途中で折り返されない。 word-break: break-allなら単語の途中でも折り返す。 参考:

webで丸いボタンを作る

web

border-radiusの値をwidth,heightの半分の値にすればいい。 例は以下。 .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.42; border-radius: 15px; } <a href="#" class="btn btn-default btn-circle"><i class="fa fa-user"></i></a> 参考:

半透明のマスクをかける

web

ポップアップウィンドウの外側の領域のように半透明のマスクをかけたい場合は マスクをかけたい要素の子どものdivを以下のように設定すればいい。 mask用divはposition: absoluteにして親要素全体を覆うようにする。 親はposition: relativeにしないといけな…

Everythingでファイルサーバのファイルも検索する

IT

ローカルにあるファイルを検索するのにEverythingを便利に使っていたけど、 ファイルサーバのファイルも検索対象に出来るとは。。 設定方法は以下。 * ツール > オプション > フォルダ > 追加 ボタンを押し、 フォルダ名のところにファイルサーバのパス(…

user agent stylesheetとは何者か

web

chrome dev toolでHTML Elementのスタイルを確認していると、CSSルールの中に「user agent stylesheet」で 設定されたものがある。これはブラウザが勝手に追加するCSSらしい。 ブラウザがCSS付けるとは知らなかった。。これのためにブラウザ毎に見た目が違っ…

AngularJSのイベントハンドラにViewから定数を渡す

web

突然二週間ほどAngularJSのプロジェクトを手伝うことになったのでAngularJS勉強中。 Angularでは ng-click="controller.handler('arg')" のような形でイベントハンドラに値を渡せる。 これを ng-click="controller.handler(consts.ARG)" のような感じで定数…

globalな.gitignoreを設定する

IT

windowsの場合、以下のコマンドをコマンドプロンプトで実行する git config --global core.excludesfile "%USERPROFILE%\.gitignore" そうするとホームフォルダに.gitignoreができるのでそこに無視設定を書くとglobalに適用される。 ホームフォルダに勝手に.…