ITの隊長のブログ

ITの隊長のブログです。Pythonを使って仕事しています。最近は機械学習をさわりはじめたお(^ω^ = ^ω^)

JavaScript

Angular2を触り始めたがこいつがフレームワークってことを忘れていました

意味深なタイトルっぽいけど、今日の反省です。技術的な話はしないのでそのつもりで来た人はブラウザバック。 CakePHP3をサーバサイドで、フロントをAngular2で開発しようとしました。 CakePHP3側はJson APIとして使っていましたが、部分的にCakePHP側でもvi…

jQueryしか使ったことがない人がAngularのFormで試したことを書く

この記事はAngular Advent Calendar 2016 17日目の記事です。(遅刻しました) この記事を書いている人 jQueryを使って、基本的な使い方でホームページのナビゲーション開閉やタブのアニメーションを書ける人 jQueryを使って、動的なFormを作ったり、サーバ…

【Angular2】親子じゃない同じ階層にいるComponentのメソッドを使いたいとき

タイトルだけじゃよくわかりませんね。つまりこういうこと。 AppComponent SearchComponent FormComponent ItemComponent LinkComponent みたいな構造があったときに、Linkでイベントが発生したらItemでとあるメソッドを実行する。とか、ItemからLinkに値を…

【Angular2】Converting circular structure to JSON

FormGroupの値をそのままpostしようとしたら怒られた。 そういえば、jsonの値になっていないじゃないのか。と思い、コンバートしようとする。 stackoverflow.com どうやら、そんなことはいらないらしい。 onSubmit(value: any): void { var url: string = ''…

【Angular2】Property 'map' does not exist on type 'Observable<Response>'.

stackoverflow.com main.ts import 'rxjs/add/operator/map'; rxjs/add/operator/mapをimportしたらいけた。

【Angular2】caused by: Error trying to diff '[object Object]'

ngForで、配列をイテレートしようとしたらエラーが。 ぐぐってみると stackoverflow.com Your extractData (and possibly also your HTTP API) is returning an object {} - ngFor requires an array [] to iterate. Oh... あ、てか、よく考えたら当たり前か…

【Angular2】caused by: Expression has changed after it was checked.

以前から何度か苦しめられているエラー github.com This is not a bug, it's a feature of dev mode working as intended. Calling enableProdMode( ) - see updated plunk when bootstrapping the app prevents the exception from being thrown. That said…

【Angular2】Formを動的に扱うコードを書いてみた

ここまで来るのに時間かかったよ!!! github.com コードは全部こっちにあります。コミットログを追ったら情報わかるかも。もしわからないなら質問ください。ただ私も初心者に近いので答えられる範囲ですが(^^; まずやりたいこととして、jQueryみたいにdom…

【Angular2】Cannot find control with unspecified name attribute

怒られた。 FormGroupで、viewにngModelを増やしたら怒られた。 export class ScheduleForm { private startDatetime:string; private endDatetime:string; constructor(private datetimeForm:DatetimeFormService, formBuilder:FormBuilder) { this.myForm …

【Angular2】ComponentからComponentを動的に作成してみました

タブ機能を自作してみたけど、タブComponentとその下の子Componentとどうやってやり取りさせいようかと悩んでいました。 世界に聞いてみましたが、説明が足りないのか返事は来ませんでした(´・ω・`) stackoverflow.com つーわけで、色々調べて試したんです…

【Angular2】Angular2でモーダルを自作しました

自作っつーかパクリなんですけどね github.com 元はこちら。ありがとうございます。 qiita.com 概要はgithubのREADME.mdに詰めましたので、そこをみてほしい。 ちなみに、感想としては、Angular2のバージョンアップの速度早すぎ。 個人的な感触として、3ヶ…

【jQuery】input[type="file"]をクリアしたい

チェックボックスとかで、input[type="file"]をクリアしたくなった。 ただ、こいつだけはセキュリティの関係から、簡単にクリアすることができないので、clone()を使う必要がある。ようは、一旦削除して、空っぽを書き込む流れである。 $('#inputFileType').…

Java&JavaScriptで全角数字を半角数字にするプログラム

最初Javaに書いて、あとからJavaScriptも書いた。 Java public static String hullToHalfNumber(String s) { StringBuilder sb = new StringBuilder(s); for (int i = 0; i < sb.length(); i++) { int c = (int) sb.charAt(i); if (c >= 0xFF10 && c <= 0xFF…

bowerとgulpで試してみたこと

ただのログ bowerで色々インストール ずっとパッケージを管理するのはnpmと思っていたけど、npmはサーバ用(node用かな?)のプラグインを主としているらしい。 フロントはbowerを使う。 まずはbower initする。 $ bower init angularjs1.5関連をインストー…

【JavaScript】javascriptでのデータオブジェクトのkeyに「:(コロン)」があるときのアクセス

初歩的なことですが、メモ。 こんな感じのデータオブジェクトがあったとする。 var data = { 'title': 'test', 'wp:test-data': [{ 'link': 'http://www.yahoo.co.jp' }] }; 普通にアクセスする。 > data.title "test" まぁこれは普通。 次にコロンのやつに…

ひさびさにやると忘れるJadeのif文の書き方

そう忘れるものではありませんが、頻度がね(少ないから) 与えられた値と画像名がマッチしなければ画像名の後ろの'_off'を付与するという条件書いた。 mixin img_tag(absolute_path, image_name, active) - var nav_image_name = image_name if image_name …

【CakePHP3.x】Auth Componentのセッションが切れた時にAjaxされたら、JavaScript側でリダイレクトさせるためのBeforeFilterを書く

タイトル長い タイトル通りの話。 Authのセッションが切れた後にAjaxでアクセスするとエラーが返ってきて、それ以上動作できない。 さらに、エラーのviewも返り、なんかキモいので、自分で作成したエラーメッセージとリダイレクトURLをJSONで渡せないかなと…

【AngularJS1.5】Error: $sce:unsafe Require a safe/trusted value

app.itemListをループして、そのなかにあるhtmlソースをviewに吐き出そうとした。 <div class="item-section" ng-repeat="item in app.itemList"> <div class="item" ng-bind-html="item.html"></div> </div> そしたらエラー(°ω° AngularJS Error: $sce:unsafe Require a safe/trusted value Attempting to use an unsafe value in a safe context. $sce・・・? なん…

ここ最近AngularJSで困った・ハマったことを記す

新規プロジェクトになりそうな案件に携わりプロトタイプを作成中。 サーバサイドはCakePHPでやろうとして、フロントはどうしようかなと。jQuery? いやいや、大きくなりそうな要件なので、テストやコードにルールを持たせたかったからフレームワーク使いまし…

【AngularJS1.5】値の共有をvalueじゃうまくいかなくてfactoryにしたらうまくいった

未解決。ログ残しです。 (function() { 'use strict'; angular.module('Editor', [ 'Editor.controllers', 'Editor.components', 'Editor.services' ]); angular.module('Editor.controllers', ['ngAnimate']) .controller('navigation', ['NavigationFlagVa…

【AngularJS1.5.x】directiveのtemplateにfilterを引数で渡したい

渡したかった。 index.html <first-directive main="main.myDirective" filter-name="number"></first-directive> app.js .directive('firstDirective', ['$log', 'FigureService', function ($log, FigureService) { return { restrict: 'E', scope: { directiveMain: '=main', filterName: '=filterName' }, controller: 'Main',…

【AngularJS1.4.x】 DirectiveからControllerのメソッドを呼ぶための設定

すごくハマりました。 やりたいこととして、とあるdirectiveからとあるcontrollerのメソッドを実行したかった。 が、方法がわからずにすごく時間がかかりました。とりあえずできたのでメモ。 環境 chrome 51.0.2704.103 (64-bit) angularjs 1.4.9 実装 app.c…

IE系のブラウザでNumber.isFinite()が動作しないので、polyfillを使おう

とあるプロジェクトで、エラーがでたのでコンソールみたら、「isFinite()って関数はありません」ってエラー。 「まじか・・・」と思いつつ、調べたら「polyfill」使えばいけるって書いている記事を見つけたのでメモ。 qiita.com isFiniteとは? Javascriptに…

【AngularJs1.4.x】input[type="range"]で、何故かレンジ入力の位置が変わらないバグ

丸1日ハマりました。 何故か知らないけど、directiveで作成するhtmlの中のinput[type="range"]。それに初期値を入れようとすると何故か更新されないバグがあることがわかりました。 github.com issueを見るとわかると思いますが、みんな回避作を色々用意し…

<form>でonsubmit="return false;"した時の発火させるevent内では、$('form').removeAttr('onsubmit')だけで良い

知らんかったというか、これまでずっと下記コードを書いてた。 $('#button').on({ click: function(e) { e.preventDefault(); // 一旦クリックされたイベントをキャンセル $(form).removeAttr('onsubmit').submit(); // 消した後に指定のformをsubmitする } …

JavaScriptのnullとundefinedとは?

AngularJS触っていると、当たり前だけどJSも触る。んで、この辺勉強不足なので、調べたことメモ。 nullとは? 言わずともわかるプログラミング言語でみんながチェックするのに苦労する値。 動的言語は値が取れずブラウザ画面を真っ白にしたり、Javaではコン…

AngularJS 1.4を試してみた

ドットインストールで試してみた。 dotinstall.com で、まだまだ全然わからん。。。 とりあえず色々試してみたことをメモ。 model(?)名にハイフン使っちゃダメ <p>テスト: <input type="text" ng-model="test-model"> </p> <p>結果:{{test-model}}</p> <input type="text" ng-model="test-model" class="ng-pristine ng-untouched ng-valid"> エラーの見方がわからん。。。 とりあえずハイフン使っちゃ…

iOSのjavascriptのeventでfocus + setSelectionRange()が効かない

どうすればいいんだ。。。。。 Javascriptと、いっておいて実はjquery var inputTextAllSelect = function(e) { try { // ここでiosで全選択させるように処理 e.target.setSelectionRange(0, e.target.value.length); } catch (exc) { // PCでは、input[type…

【jQuery】selectされたoptionの属性にアクセスしたい

selectのoptionにdata-urlとか属性をもたせた時、selectされたoptionの属性を引っ張ってきたい。 普通に思いつくのはこれ $(selector.selectbox).val(); // select boxのoptionのvalueが取得できる。 でも他の属性は・・・? 思いついたのはこれ。 $(selecto…

【JavaScript】submit二重送信防止

んー。なんか腑に落ちない事象だけど。とりあえずメモ。 そもそもなにやりたいの? とある問い合わせフォームにて、submitを二重送信されることが多かったので止めてほしいとのこと。(スマホとかだと連打しちゃうよねー。押しづらいし) ちなみに、対象のフ…