解決が結構面倒だった。 まずng-repeatでスクロール領域内を更新していたので、更新完了イベントが必要だった。 以下のdirectiveを定義してng-repeat完了イベントを定義した。 module sample { 'use strict'; /** * ng-repeat処理完了イベントを発行するDirective */ export class OnFinishRenderDirective implements ng.IDirective { public priority: number = -1; public restrict: string = 'A'; public scope: any = {}; private timeoutService: angular.ITimeoutService; public link: Function; /* @ngInjec
やりたいこと コレクションをng-repeatで描画しているときに、そのコレクションに対してunshift（先頭に挿入）した場合、DOM描画後にスクロール位置が先頭に移動してしまいます。これを回避したいという話です。 解決方法 厳密に言うと、「元のスクロール位置を保持」しているからこそ、先頭に移動してしまうわけで。。。つまり、もともとスクロール位置が画面トップだった場合はscrollTop == 0ですが、unshiftによる再描画後もscrollTop == 0のままなので、スクロール位置が先頭に来ているというわけです。 というわけで、再描画後にスクロールコンテナの高さが増えた分だけ下にスクロールさせてやればよい、ということになります。（ベストな方法かは分からないですが・・・） サンプル 初期状態ではitemsというコレクションを100件表示します。画面上部の"Load Previous
![[AngularJS] コレクションに挿入した後にスクロール位置を保持する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ce5de4aa98cf588890156d0b512fc2592b069400/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMzIxMzYlMkZwcm9maWxlLWltYWdlcyUyRjE1NTczOTA3NDA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NTQ4MDhlMjA5YTU2ODE4YTUxODdkZmVjZWY5NTJmOWE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5d782f8c1acba1d6036eb788be33b7b6%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhckpTJTVEJTIwJUUzJTgyJUIzJUUzJTgzJUFDJUUzJTgyJUFGJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJUFCJUU2JThDJUJGJUU1JTg1JUE1JUUzJTgxJTk3JUUzJTgxJTlGJUU1JUJFJThDJUUzJTgxJUFCJUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJUFCJUU0JUJEJThEJUU3JUJEJUFFJUUzJTgyJTkyJUU0JUJGJTlEJUU2JThDJTgxJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MTU1MGE1ZWI5ZDQ2YmJlYTk2ZjYyMjU1ZDEwODFkYzE%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBpdG1hbW1vdGgmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1iYWExZThlNjhhODgzZGUxOWQ4N2Q0YzExZTFlMjhmMA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dde0660d9e046de23f968e341269d8917)
どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com
皆さんはAngularJSに興味がありますか？ この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで：15周年記念特別企画 ＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。 2015年6月17日に、JavaScriptの最新標準仕様となる、ECMAScript 6（ES6、ECMAScript 2015）が正式に承認されました（参考）。1997年にECMAScriptのバージョン1がリリースされてから6度目のアップデートとなり、これまでの中で一番大きな変更が加えられたことになります。 本稿では、ECMAScript 6が正式に承認されたということもあり、2000年頃の第一次ブラウザー戦争
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? AngularJSとBootstrapを組み合わせたライブラリと言えば、UI Bootstrapが最も有名ですが、UI BootstrapよりもAngularStrapの方が好みです。 というわけで、この記事ではAngularStrapの良いところを紹介します。 AngularJSとAngularStrapについて、それぞれ次のバージョンを対象とします。 AngularJS: 1.3.6 AngularStrap: 2.1.4 AngularStrapとは AngularStrapは、BootstrapのUIコンポーネントをAngula
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
これは Heroku Advent Calendar 2014 の２１日目(12/21)の投稿です。 最近はクライアント(ネィティブアプリ、JavaScriptベースのWEBアプリ)とサーバを RESTful な WEB API でつなぐパターンが増えてきてる気がしています。エンドユーザ向けのサービスだけでなく、管理画面やツールなどでも。 今回は AngularJS Full-Stack（generator-angular-fullstack） を利用して Node.js(Express) と MongoDB ベースの RESTful な API サーバ を作り Heroku へデプロイするまでやってみます。（AngularJS の環境は、今回は使いません。フロントエンドは AngularJS をそのまま使ってもいいし、それ以外にしてもOK。） 『AngularJS Full-Stack』
手作りMEAN Stack 業務アプリをAngularJS+PHP+MySQLで組んでいたのですが、JavaScriptとPHPの文法の微妙な違いのおかげでケアレスミスが多く出てきてしまいました。 そこで、フロントエンドもバックエンドもJavaScriptで統一できる、流行りのMEAN Stack(MongoDB+Express+AngularJS+Node.js)を試してみようと考えた次第です。 MEAN Stackのひな形を作るツールもいろいろあるのですが、今回は手作りで作成してみます。 WindowsとUbuntuの導入方法を挙げますが、他のOSでもほとんど同じ感じでいけると思います。 M: MongoDBのインストール・設定 言わずと知れたNoSQL界の雄です。 Windowsの場合 http://www.mongodb.org/ こちらからダウンロードしてインストールします。今回
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
今回の記事は、Onsen UI blogで2月に公開した"Creating Google Maps Sample App with AngularJS and Onsen UI"の翻訳記事です。 以下のツールを使用して、このサンプルを構築します。 Onsen UI ( HTML5 を使用したハイブリッドアプリを作成するためのフレームワーク ) AngularJS ( Google 社が開発した JavaScript のフレームワーク ) Google Maps JavaScript API v3 ここでは、Monacaを使用して、アプリを開発します。Monaca は、クロウド型のアプリ開発環境です。このツールを使用すれば、マルチプラットフォーム ( iOS/Android/Windows8 ) に対応するハイブリッドアプリを開発できます。Monaca には、Onsen UI のフルサポート
前年開催したリーダブルコード勉強会やアプリコンテストに参加いただいた大学院生 kentya6 (Kengo Yokoyama) · GitHub さんが、Swiftで作った以下のライブラリをGitHubで公開したところ、★300以上ついた！ というお話を聞きつけ、その経緯やどんなことが起こったのか、インタビューしてきました! github.com －まずは自己紹介ということで、普段行っている研究や開発で、どんなことをされているか、教えてもらえますか? 私の在籍している 筑波大学高度ITコース では、研究ではなくPBL形式のチーム開発を行っていて、顧客の要望をヒアリングして実装に落とし込み、最後に納品するというシステム開発を行っています。 修士2年になってからは別のプロジェクトが始まりましたが、修士1年では施設内ナビゲーションアプリCampusAR を作成していました。 （補足: Campu
Try it yourself! Check out the demos page to see more examples. What is a tags input? A tags input is an input box that automatically creates tags – also called tokens – out of typed text every time a certain key is pressed. It's useful for tagging and highlighting information right on the input box. What is ngTagsInput? ngTagsInput is a highly customizable tags input directive built for the Angul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
