はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
Step0 事前準備 index.html <!doctype html> <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="AppCtrl"> <p>{{value}}</p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <script src="controllers.
@can_i_do_webさんに指名(?)を頂いたといことで。 AngularJS Advent Calendar 2014 (adventarの方) の1日目の記事です! 先陣を切らせて頂きます。 はじめに 今回はAngularJSでHTTPrequestをするときにかなりハマった話(笑)をまとめたいと思います。 同じようにハマる人がいるかもしれないのでメモしておきます。 私のスペックは バックエンドのエンジニア Angular.JSは趣味に近い形で勉強中 Angular.jsは雰囲気で書いていて理解はまだ追いついてない という感じなので、初学者の人は同じエラーに出会うかもしれません Access-Control-Allow-Origin. 今日はこのあたりでめちゃハマってました。 APIのレスポンスを返す側がクロスドメイン環境を許可していない場合にクライアント側で表示されるエラーってい
Browse: Home » 【AngularJS】ngRepeatが完了したタイミングでコールバックを呼びたい。 ので調べてみた。 安定のstackさん。ありがとうございます。 http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished まず、ngRepeatの終了を検知するディレクティブを定義。 var module = angular.module('testApp', []) .directive('onFinishRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $t
このエントリはAngular JS Advent Calendarの投稿です。 Promise使ってますか? Promiseは非同期をうまくやってくれます。 Promise インターフェースは作成時点では分からなくてもよい値へのプロキシです。プロミスを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つプロミスを返すことで、同期メソッドと同じように値を返すことができるようになります。 プロミスは何らかの値をもって成功、もしくは何らかの理由をもって失敗となることができます。そのどちらとなっても、then メソッドによって関連付けられたハンドラが呼ばれます。 Promise.prototype.then メソッドと Promise.prototype.catch メソッドはプロミ
AngularJSではselect要素による選択フィールドもスコープ変数にバインドすることが出来る。その際、option要素の代わりに ng-options属性で選択肢を提供するための書式を解説する。 Tweet 2014年3月29日 嶋田大貴 ng-options属性の書式は一見独特で最初はわかりにくいので、具体的な例をいくつか挙げることで理解の助けにしてもらおうと思う。 公式ドキュメント: AngularJS: API: select 数値や文字列などの配列から選択させる 配列にプリミティブな値が直接格納されており、選択肢のラベル=バインドされる値で構わない場合には一番シンプルな記述となる。 JavaScript $scope.years = [2010,2011,2012,2013,2014]; $scope.selectedYear = 2014; HTML <select ng-
はじめに Angular JS で複数のコントローラ間でモデル(状態や値)を共有する方法として、次の 3 種類を解説します。 モデルを共有するサービスを使用する (Shared Service)。 親コントローラのスコープを子コントローラで共有する (Parent Scope Sharing)。 イベントを利用する (Pub/Sub)。 Shared Service 複数のコントローラ間で共有するモデルをサービスとして作成し、そのサービスを複数のコントローラで参照します。 実装例を示します。 <!DOCTYPE HTML> <html ng-app="AngularJsStudy"> <head> <title>Shared State Service - AngularJS Study</title> <meta charset="utf-8" /> <meta http-equiv="
こんにちは。piyohikoです。 初Qiita投稿です。お手柔らかにお願いします。 今回はAngularJSのfilterFilterという機能を紹介します。 割と便利なのにドキュメントがほとんどないので書いてみます。 filterFilterって? 簡単に言うと対象の配列内に任意の値があるかどうかを検索できます。 filterFilterを使わずに配列に任意の値があるかどうかを検索しようした場合 var array = ['aaa','bbb','ccc']; var string = 'aaa'; var result = array.filter(function(value){ return (value === string); }); console.log(result); //["aaa"] var array = ['aaa','bbb','ccc']; var str
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く