[AngularJS] ngMessages 対応カスタムバリデータの作り方 | DevelopersIO
車輪開発大好きおたいがです。こんにちは。( 挨拶 ) 今回は AngularJS 1.3 で実装された ngMessages に対応したカスタムバリデータの作り方をまとめました。 通常の使用方法 通常 ngMessages を使用したバリデーションを使用するときには、入力系 DOM 要素 ( input, textarea, select ) は以下の条件を満たす必要があります。 name 属性を定義している ngModel を定義している 1 つ以上の専用ディレクティブ ( ng-required, ng-minlength, ng-pattern など ) を定義している name 属性を定義している <form> 要素、または、ngForm を定義したブロック要素を親 ( 先祖 ) としている リファレンスに記述されている実装例 <form name="sampleForm"> <l
![[AngularJS] ngMessages 対応カスタムバリデータの作り方 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/648e11f84f388126ccfdea056ad86ba379173295/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
[AngularJS] UI.Sortable を使ったドラッグ＆ドロップ UI の構築 | DevelopersIO
車輪開発大好きおたいがです。こんにちは。( 挨拶 ) AngularUI プロジェクトには UI.Sortable というサブプロジェクトがあります。このプロジェクトは jQuery UI Sortable を AngularJS 用にカスタマイズしたものが置かれていますが、その中の一例を実務で採用したので使用方法をまとめておきました。 導入 bower または npm でソースを取得します。 bower install -S angular-ui-sortable npm install -S angular-ui-sortable ( -S は --save と同義 ) 依存関係 jQuery jQueryUI 1.9+ AngularJS v1.2+ jQuery, jQueryUI が必要になるので <script> 要素の記述を忘れないように気を付けましょう。 定義 bower
[AngularJS]filterでnullを評価する | fine:der.
先日の記事でAngularJSのfilter機能について紹介しましたが、 その中で「filter」というfilter（わかりにくい)がけっこう便利で、簡易な検索機能が簡単にできる代物です。 まずは公式のＡＰＩリファレンスを見てみてください。 これを使ってみると、「特定の項目だけのフィルターをかけたい」とか、「否定の条件でフィルターをかけたい」とか、「nullの項目を表示したい」とか思うはずです。 それについてサンプルを作ってみたので、紹介します。 動作サンプルはこちら 不等号演算子は’!’ けっこう詰まったのですがFilterで「項目!=検索値」に該当するものだけを取得するには、検索値の前に’!'を付けます。 ここで注意なのは’!’は検索値の文字列として入力しないといけません。 ○ ⇒< friend in friends |filter:検索項目='!検索値'> ○ ⇒< frien
[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は、画面遷移時にコントローラを跨いで値を受け渡す方法をまとめてみました。「良い」とされる例もあれば、「悪い」と思われる例もありますが、お付き合いください。 自前グローバルオブジェクトを使う ある意味で最強なグローバルオブジェクト ( トップレベルのオブジェクト ) ですが、今回のような例で使用した場合、チーム内のコードレビューでお説教されることうけあい。 サンプル 一応、サンプル貼っておきます。( 真似することはお勧めしません ) ソース シンタックスハイライトもおかしなことになってしまう破壊力… var Globals = {}; // ('A`) (function () { angular.module('appName', ['ngRoute'], function($routeProvider) { $routeProvide
[AngularJS] カレンダーにおける日付 (Date) のお世話サンプル | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は日付 (Date) オブジェクトをお世話するときに気を付けておくと良い点をまとめてみました。 ui.bootstrap.datepicker のサンプル Datepicker を用いたサンプルを用意しました。 「開始日 (fromDate) 」「終了日 (toDate)」という 2 つの日付を選択できるものとお考えください。 このサンプルを元に話を続けます。 複数モデルの世話 出力 わざわざ説明する必要ないかもしれませんが、データバインディング機能を使えば可能です。フィルタ機能で任意の文字列に変換しています。 <h2>Date : {{fromDate|date:'yyyy/M/d'}} ~ {{toDate|date:'yyyy/M/d'}}</h2> 監視 「開始日」「終了日」の各モデルを $scope.$watch() で監視す
[AngularJS] データグリッド的な編集可能 Table サンプル | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 前回記事で紹介した 'cmEditableText' ディレクティブを用いた応用例として、次のようなサンプルを作ってみました。 サンプル 'First Name' と 'Last Name' の列にあるセルをダブルクリックすると、セルの中身が編集できます。( PC のみ対応 ) cmEditableText の売り <td> 要素に 'cm-editable-text' と追記するだけで編集可能なセルになります。 Table 行は ngRepeat を利用してコレクション ( 配列 ) を元に構築するので、行に対するモデルの定義は以下のようにします。 <tbody> <tr ng-repeat="item in items"> <td><input type="checkbox" ng-model="item.checked"></td><
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
