またAngularjsとか今さらな話だけど...https://qiita.com/yaegaki/items/c9cf111ef9d0c541a194 こちらを参考に自分のアプリに試してみたところ、動くところと動かないところが出てきたこんな感じのコードが動かなかった <div ng-if="show()"> <input type="text" ng-mode="input.hoge" jp-input /> </div>ng-showにしたら動いたよ <div ng-show="show()"> </div>

今回はGoogleMapを扱う際に気になったのでちゃんと実装してみたのでその時のメモ。htmlにscriptタグを埋め込むやり方が普通なのだろうが、そこでネットワークエラー等が発生するとhtmlを再読み込みしない限り2度と読み込むタイミングがないのではないかとい…

今回やりたかったのは、サインアップ画面等でパスワードとパスワード(確認用)の入力画面を用意して、一致していなかったらバリデーションではじく。というありがちな画面。https://github.com/TheSharpieOne/angular-validation-match 探したところこちらに…

angularjs使うときはまたやりそうなのでメモしておくまず、配列はどこかに一箇所に定義しておく angular.module('myApp') .value('define', { 'area': { 1: '北海道', 2: '東北', 3: '関東', ・・・ }, });テンプレートから参照できるようにコントローラで $…

はじめに 今回やりたかったことは入力フォームにバリデーション機能を実装して、不備があった場合は送信ボタンを押せなくして不備の内容を画面に表示するということ。今回は angular-messages というライブラリを使った。angular-messagesのインストール $ b…

今回やりたかったことは以下。 angularの$http.getまたは$http.postでAPIへリクエストしたレスポンスヘッダーを取得するということ。 chromeの開発ツールからはレスポンスヘッダーを確認できたのだが、angularでは取り扱う場合にうまく取得できずに少しはま…

まだ調査中。無限スクロール実装するときにng-repeatよりcollection-repeatを使った方がパフォーマンスが良いらしい。とのことで。試していたら行の高さが1行目の高さに合わせられてしまうようで、高さを動的にする場合は高さを計算してやる必要がありそう。…

こちらのコードを実行すると、testが1秒間隔で3回順次実行される。 var test = function() { var deffered = $q.defer(); $timeout(function() { deffered.resolve(); }, 1000); return deffered.promise; }; var deffered = $q.defer(); var promise = deff…

半日くらいハマりました。エラーが出てたコード angular.module('myApp', []); angular.module('myApp') .service('myService', function() { ・・・ }); angular.module('myApp', ['ngCordova']) .service('myService2', function() { ・・・ });修正後のコ…

はじめに 今回やりたかったのはこんな画面。 イマイチできるのか不安だったけど無事できた。ionicは海外の情報が多くて「ionic tabs inside tabs」とか「ionic tab nested」ってみんな検索してるみたい。イメージはこんなかんじ アプリ特有?かわからないけど…

やりたかったことは、localhostのサーバーで動いてるクライアントHTMLからサーバー上のAPIにPOSTでJSONを送るということでした。 なんかうまくいかなくて色々やってみたけど、結論からいうとangular側は以下のコードでいけました。クライアント側 $http.post…

やりたかったのはページによってタブの中身を動的に変更したり、タブの数自体を変更したり、タブ自体を非表示にしたり。そんな感じです。ionicというよりはangular-ui-routerの使い方になるのかな。いちおうメモしておきます。$stateChangeStartでページが変…

はじめに 今回やりたかったのはよくある無限スクロール。 リストの1番下までスクロールしたら次のデータを取得しにゆきます。 これをAngular + Onsen UIで実装したのでメモしておく。データ数の多いリストはパフォーマンス的にons-lazy-repeatを使うとよいら…

はじめに ファイルアップロードする方法を調べてたら「angular file upload」というモジュールが有名ぽい。 danialfarid/angular-file-upload · GitHub こちらがgithubになります。サンプルみてみたけどあまりちゃんと理解できていないのですが、とりあえず…

やりたいこと サーバに通信してデータを取得する処理などに、完了するまで「読み込み中」とか「now loading」とか表示するアプリがあると思いますがあれを実装する方法をメモしておきます。 AngularOverlayというモジュールが公開されているのでこれを使って…

やりたいこと ページで一覧表示をしてリストの1番下までいったらサーバに通信してデータをとってきてhtmlに反映させるみたいなありがちな処理です。「angular.js 無限スクロール」とかで検索したら「ngInfiniteScroll」というモジュールがいろんなサイトで紹…

やりたいこと なんらかの情報を一覧表示。たとえば最初に20件くらい表示しておいてスクロールして1番下の方にもっとみるボタンを設置。もっと見るボタンをおしたら次のページを表示。ありがちなページを作成したかったのでそれのangular.jsで実装したときの…

案件でちょっとしたHTMLエディタを探してたのですが、いい感じのがあったので紹介です。 angular.jsのプラグインの形で作られている、textAngularというものになります。 こちらが公式サイトになります。 githubはこちら。 見てもらえればなんとなくわかると…

やりたかったこと タイトルのとおりですけど、画像が一覧表示されてて画像をクリックすると画像が選択中になってもう1度クリックすると選択解除となるようにする。 で、送信ボタンをクリックすると選択した画像のidを送信する。というよくあるページを作りた…

やりたかったこと webサイトでよくあるファイルアップロード機能をcorodovaアプリでも実装する必要がありました。 最初はwebサイトと同じようにinputタグのtype=fileで実装しようとしてたんですけどcordovaのプラグインを調べてみると以下のプラグインがあり…

// router myApp.config(function($routeProvider) { $routeProvider.when('/', { templateUrl: "index.html", controller: "ControllerIndex", }).otherwise({ redirectTo: '/' }); }); // controller myApp.controller("ControllerIndex", function($scope…

はじめに 最近ハイブリッドアプリの勉強中なのですが、ネットとかで調べながらやってるとangular.jsやbackbone.jsなどのフレームワークを使った事例やサンプルなどが多いのでそういうものだと思ってました。angular.jsやbackbone.jsのノウハウがあるわけでも…

はじめに angular.jsでcorsを有効にしてajax通信できることは過去に実装したことがあった。 なのでcordovaを使用する場合に特別なことをする必要があると思ったのですが違いました、、、 いちおう今回対応できたのでメモしておきます 対応したこと ・サーバ…

こちらの続編です。 上記のページの例では1モジュール1関数みたいな書き方になってしまったのであまり汎用性がないなと思って追記で1モジュールに複数関数定義できる形にしました。モジュール App.factory("ModelUser", function($resource) { return $resou…

１０秒ごとに画像を切り替える処理を作りたかったのだが 画像の切り替えでちょっとハマったのでメモcss .image { background-color: white; background-repeat: no-repeat; background-size: contain; color: white; height: 100%; }html <div image class="image" ng-style="{'background-image': 'url(' + backimg + ')'}">js $scope.backimg =</div>…

やりたかったこと corodovaで簡単なアプリ開発をしてて、アプリ使用時に設定した内容を記録しておいて次回起動時にそれを読込む仕組みを実装したかった。 今回は保存先としてhtml5で利用可能なローカルストレージ(localstorage)を使用する事にした。 そのプ…

軽くハマったのでひな形をメモしておきますjavascript var app = angular.module("myApp",[]); app.controller("ControllerIndex", function($scope) { }); app.directive("csschange", function () { return function ($scope, element, attrs) { $scope.cl…

はじめに まだ勉強段階だが、cordovaでの開発環境を作るときの流れをメモしておく 自分が今時点で使っているものは以下 ・cordova(ハイブリッドアプリフレームワーク) ・angular.js(jsフレームワーク) ・onsenui(uiフレームワーク) ・grunt(開発ツール)シン…

やりたいこと angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。今回やりたかったのは以下のような処理を全ページにいれたかったです 例1. ログインせずにアクセスされたらログインページ…

やりたかったこと project ├── public │ └─ assets │ ├─ js │ ├─ ・・・ ├── fuel └── nodejs # 自分で作ったフォルダ ├─ bower_components #bower installで取得したファイル │ ├─ angular │ ├─ angular-route ├─ ・・・今まではこんな感じのディレクトリ構…