サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
www.fine-der.net
on blurでイベントを発生させるためのAngular Directiveを作ってみました。 以下のように書くことでonBlurで指定した関数を呼び出すことができます。 Sample Demo onBlurのタイミング … Continue reading → Categories: Angular JS | Permalink AngularJSでブラウザのWindowオブジェクトを使う場合、$windowサービスを使用することが奨励されています。 普通にJavaScriptのwindow.openにAngularのモデルの値を使おうと思ったら … Continue reading → Categories: Angular JS | Permalink AngularJSには$resource、$cookiesなどいろいろなサービスが用意されていますが、もちろん自分で作成すること
AngularJSのモジュールの中にngResourceというものがあって、それを使うことにより外部APIなどとの連携がしやすくなります。 個人的にはこのngResourceで提供される「$resource」というサービスがAngularJSの目玉機能だと感じています。 この機能を使うとフロント側の処理をAngularJSのみに任せることができ、サーバー側にPHPやRUBYのAPIのみを実装するという構成を作ることができます。 これの利点としてWebとスマートフォンでAPIを共有することができるし、場合によっては全てワンソースということも可能になってきます。 一番シンプルな使い方で使ってみましょう。 ドキュメントはこちら。 $resource サンプル 今回FacebookのAlbumから情報を$resourceで取得して、表示するという実装をしてみました。 動作サンプルはこちら
[CSS]CSSだけでチェックボックス・ラジオボタンの見た目を変える。 2012/12/10 by long JavascriptだけでなくCSSもいろいろと進化していますねぇ。 今まではほとんど触れなかったチェックボックスも見た目が自由自在に変えられるようです。 Creating Custom Form Checkboxes and Radio Buttons with Just CSS! こりゃすごい。 仕組みとしては、checkboxの本体は「display:none」で消してしまって、ラベルの方で見た目を制御するというもの。 label { display: inline; } .regular-checkbox { display: none; } .regular-checkbox + label { background-color: #fafafa; border:
[AngularJS]ng-repeat内の特定のデータだけclassを変更する方法。 2012/12/13 by long こんにちは。 今日はAngularJSのng-repeat内で特定のデータだけのclassを変更する方法についてです。 いろいろと応用が効きそうなので覚えておいた方がいいやり方だと思います。 動作サンプルはこちら。 ■HTML <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script> function MyCtrl($scope) { $scope.test="test string" $scope.isMe = function(friend){ if(friend.me==true){
URLが入力されたら、自動的にリンクにする機能は実装したいですよね。 じゃぁ、勉強ついでにfilterかdirective作ってみようか。。。。。 と、思ったら、 普通にAngularJSの公式にあった! linky (filter in module ngSanitize ) すごいぜAngularJS開発チーム。 Sanitizeモジュール これは「Sanitize」というAngularJSの本体とは別モジュールの中にある機能です。 AngularJSのパッケージをダウンロードすると、「angular-sanitize.js」というスクリプトファイルも入っているので、それをインポートしてください。 モジュールには「ng-app=ngSanitiz」と設定します。 <html ng-app="ngSanitize"> もし、今実装しているモジュールに組み込む場合は、「app.js」
Ajaxによるデータベースとの連携が増えてきた昨今、非同期連携は欠かせません。 setTimeoutという関数がJavascriptにはありますが、同様のものがAngularJSにもあります。 それを使って、1秒置きにカウントアップするプログラムを書いてみました。 JSFIDDLEのソースはこちら <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script> function MyCtrl($scope,$timeout) { //読み込み時の初期値設定 $scope.testnum=0; $scope.updateValue = function(){ $timeout(function(){ $scope.testn
先日の記事でAngularJSのfilter機能について紹介しましたが、 その中で「filter」というfilter(わかりにくい)がけっこう便利で、簡易な検索機能が簡単にできる代物です。 まずは公式のAPIリファレンスを見てみてください。 これを使ってみると、「特定の項目だけのフィルターをかけたい」とか、「否定の条件でフィルターをかけたい」とか、「nullの項目を表示したい」とか思うはずです。 それについてサンプルを作ってみたので、紹介します。 動作サンプルはこちら 不等号演算子は’!’ けっこう詰まったのですがFilterで「項目!=検索値」に該当するものだけを取得するには、検索値の前に’!'を付けます。 ここで注意なのは’!’は検索値の文字列として入力しないといけません。 ○ ⇒< friend in friends |filter:検索項目='!検索値'> ○ ⇒< frien
このページを最初にブックマークしてみませんか?
『www.fine-der.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く