AngularJSのng-optionsを使ってSelectメニューを作成 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
AngularJSのng-optionsを使ってSelectメニューを作成する方法をまとめました。 デモとコードサンプルはこちら。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．シンプルな設定方法 ２．メニュー選択時の値を指定する場合 ３．グループ化してSelectメニューを表示 １）構文 <select ng-options=”value.label for value in array”> array：データモデル内の配列 value：Selectメニュー選択時に適用される値 label：Selectメニューに表示される各メニューのラベル ２）使用例 ○AngularJSスクリプト内のモデル $scope.citys = [ { id: “0101”, name: “港区”, pref: “東京都”}, { id: “0102”, name: “渋谷区”, pref
Capybara+PhantomJS+Nokogiriを利用してスクレイピング - プログラマでありたい
CapybaraとPhantomJS、Nokogiriを利用してのクローラー・スクレイピングの紹介です。 PhantomJSとは？ PhantomJSは、ヘッドレスブラウザと呼ばれるWebKitのエミュレータです。ヘッドレスブラウザとは、GUIではなくCUIから利用できるブラウザでプログラムから呼ばれます。UIのテストツールとしてSeleniumのようなサービスがあります。Seleniumはブラウザを直接操作するので、環境依存や動作が重いといった幾つかの問題点があります。そこでよく利用されるのがPhantomJSです。Seleniumに比べて、軽量というメリットがあります。RubyからPhantomJSを扱うライブラリとして、Poltergeistがあります。 Capybaraとは？ Capybaraは、WebシステムのUI層のテストをサポートするためのライブラリです。主にDSL機能とDr
todomvc/examples/angularjs-perf at gh-pages · tastejs/todomvc · GitHub
readme.md AngularJS (Performance Optimized) TodoMVC Example HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. AngularJS - angularjs.org Learning AngularJS The Angula
AngularjsでDirectiveを作るときに考えていること - ハードコイルド・ワンダーランド
最近、仕事や趣味でAngularjsのDirectiveを作る機会が何回かありました。Directiveは非常に強力な機能ですが、使い方を誤ると碌なことにならないので現在どのような方針でDirectiveを作っているのかを書きます。 いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会 イベントレポートでも触れられているように、ベストプラクティスが見つかっていない感じなので色々な人の意見を聞きたいです。 基本的な方針 可能な限りDirectiveは作らない DirectiveはAngularjsの中でも仕様が複雑で理解しづらく、ファイルが分散するので作るだけの明確な理由がないものについてはDirectiveにするべきではない。Angularjsはビルトインディレクティブが充実しており、大半の問題はこれを利用すれば解決する。無駄な重荷を負う必要はない
AngularJSでの非同期処理の話
�フレームワークを利用した�シングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
Promiseを使おう - Qiita
このエントリはAngular JS Advent Calendarの投稿です。 Promise使ってますか？ Promiseは非同期をうまくやってくれます。 Promise インターフェースは作成時点では分からなくてもよい値へのプロキシです。プロミスを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つプロミスを返すことで、同期メソッドと同じように値を返すことができるようになります。 プロミスは何らかの値をもって成功、もしくは何らかの理由をもって失敗となることができます。そのどちらとなっても、then メソッドによって関連付けられたハンドラが呼ばれます。 Promise.prototype.then メソッドと Promise.prototype.catch メソッドはプロミ
Angular.jsのディレクトリ構成のベストプラクティスを探る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や，ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent C
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
[Angular.js]factoryとserviceの使い分けについて
最近、プライベートのプロダクトでAngular.jsを勉強がてら使っている。 Yeomanでgenerator-angularを使う方法でやってたり。 で、結構悩んで調べたことがあったので、メモ。 ※使い始めて間もないので、間違いがあったらご指摘ください。 サービスを作るやり方、Angular.jsだと色々あります。 yeoman-generatorのREADMEを参考に挙げると https://github.com/yeoman/generator-angular#service service, factory, provider, value, constant と、実にたくさん。 providerとvalueとconstantは、名前からなんとなく使い分けが判るんだけど、 serviceとfactoryの違いって何よ？って結構悩んだ。 簡単な実装例だと、「結局どっちも書き方が違うだ
angular.jsでログイン認証などの共通処理を実装する方法 - とりあえずphpとか
やりたいこと angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。 今回やりたかったのは以下のような処理を全ページにいれたかったです 例1. ログインせずにアクセスされたらログインページを表示するような処理 例2. socket.ioとの接続が確立できていなかったら接続または再接続を行う処理 phpなどのサーバサイドでの実装はよくやってましたがjavascript(というかangularjs)でこういう処理は初めてでした。 実装 実際にこんなに単純な認証があるかはわかりませんが、サイトにアクセスしてきたら必ずサーバへリクエストしてokならそのことを保持しておいて以降は何もしないという流れになります // メイン処理 var App = angular.module("App", ["ngRoute", "ngResou
TypeScriptで始めるNode.js入門 - ICS MEDIA
みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptランタイムのNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、Viteやwebpackのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用するのはオススメです。TypeScriptの導入によって開発の生産効率性・保守性を上げることができます。WebStormやVisual Studio Codeを使えば以下の利点があります。 コード補完が効くためプログラミングの効率が劇的に向上 静的型付けによってコンパイル時型チェックが行われるので安全性が向上 Node.jsでTypeScriptを使う方法は、いくつかの方法があります。今回はNode.jsをType
『Web Componentsで行うHTMLのコンポーネント化』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水（@1000ch）です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
iOSデバッガー3.2の変更点について
1月24日より、iOS版の最新デバッガーである3.2.0の配信を開始しました。このデバッガーではCordova 4.1への対応やステータスバーの搭載をとりやめるなど、いくつか大きな変更点があります。本記事にまとめていますので、ご参考にしていただきますようお願いいたします。 変更点の概要 iOS版Monacaデバッガー3.2.0は、以前のバージョンと比べて下記の変更が行われています。 Cordova 4.1にアップデート デバッガーが搭載しているCordovaを、最新のCordova 4.1.0にアップデートいたしました。その結果、最新のCordova APIに対応し、バグ修正や安定性の向上が行われています。 CordovaのStatus Barプラグインの取り外し これまでiOS 6との互換性をとるために、Status Barプラグインを標準で組み込んでいました。それにより、iOS 7やi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
(｡･ω･)ﾉﾞ AngularJS select option value | (σ・∀・)σ ぴんちゃん
Taking Your Cordova App Further with Onsen UI — SitePoint
AngularJSの$scopeをController as で置き換えるべき理由 - Qiita
FLABO
ビジネスロジック記述の必須知識、AngularJSの「サービス機能」を理解しよう
Fixed ons-tabbar to be hidden when set hideTabs by atakayama · Pull Request #423 · OnsenUI/OnsenUI
html5 - ドロップダウンメニューをOnsen UIで実装することはできますか? - スタック・オーバーフロー