ng-clickの引数の中で、変数を展開する方法です。ng-repeatなどでループしながら、呼び出しを生成して動的にパラメータを変更するときなどに利用します。{{}}は不要です。 ng-click="hogehogeFunction('testParam' + $index)" で、例えば$indexが0の場合、渡された側では testParam0 のようになります。意外と忘れるのでメモしておきます。
ng-clickの引数の中で、変数を展開する方法です。ng-repeatなどでループしながら、呼び出しを生成して動的にパラメータを変更するときなどに利用します。{{}}は不要です。 ng-click="hogehogeFunction('testParam' + $index)" で、例えば$indexが0の場合、渡された側では testParam0 のようになります。意外と忘れるのでメモしておきます。
AngularJSでいろいろ操作するときはng-clickなどのng系のイベントを利用する必要があります。ですが、結構な頻度でng系のイベント以外のところでもscope操作がしたくなったりします。 そんな時には以下のように書きます。 function hogehoge(){ var targetScope = angular.element(targetElement).scope(); targetScope.$apply(function(){ targetScope.mokomoko = "value"; }); } <div id="targetElement">{{mokomoko}}</div> JQueryと連携して使うときなどによくつかうと便利だと思います。
条件によって、特定のdivのブロックやリンクを表示したり、非表示にしたりする方法です。以下のように記述します。 ■ng-classを利用する方法 ng-class="(hogehoge.length == 1) ? 'hidden' : 'disp'" ()の中が条件となります。条件に一致していたら、非表示にする。それ以外は表示となっています。普通の三項演算子と同じですね。 これで、いろいろテンプレートを動的に切り替える感じのことができるようになります。 ■ng-showとng-hideを利用する もう一つはng-showとng-hideを利用する方法です。以下のように記述します。 ng-show="value" valueの評価がtrueになれば表示されて、falseになれば非表示になります。 ng-hideは逆になります。
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。オトギアでフロントエンジニアをやってます。atsumoです。 今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。 ※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、1.2.16をベースに書かせていただきます。AngularJSとは https://angularjs.org/ Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。 同じような種類のフレームワークとして、Backbone.jsやKn
[AngularJS]コントローラー外の関数から、他のコントローラーを操作する。 2012/11/30 by long : comments 本日もAngularJSの話。 他の関数やらコントローラーから、他のコントローラーの値を操作したい、という要望は要望として当然あると思います。 それをやってみようということで、コード書いてみました。 思いのほか苦戦しました（-ロ-; <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script> function MyCtrl($scope) { $scope.test="test string" }; function changeValue(){ var testScope =
もう１年以上ブログ放置してるしどうでもいいんだけど、angularJSが困ったちゃんすぎて実用化できないので書いちゃう。 やりたいことは「見たまま編集できるCMSの開発」 サーバサイドは既存のCMSそのまんまでよくて、保存とレスポンスをajaxでできるようにしただけ。 で、入力を表示をangularのリアルタイム描画にまかせようと思って組み込んだら、テキストエリアでハマった。 結局、１週間ほどトライ＆エラーを繰り返し、やや強引だけど解決した。 現象 angularJSで、ビューの描画は{{モデル名}}ってやるんだけど、１行テキスト（input[text]）ならそのままでＯＫ。だけどテキストエリアは致命的で、改行が反映されない。このせいで俺の新型CMSがぽしゃってしまった。もうヤダ。 ちなみに現象のサンプルはこちら。 angularJSの一番シンプルなモデルとビューだけのサンプルはこちら。入
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script> <script type="text/javascript">//<![CDATA[ window. var app = angular.module('myApp', []); app.controller('testCtrl', function ($scope){ $scope.hoge = 'hello'; }
こんにちは、a-knowです。 今回も前回に同じく、AngularJSの話題です。 表題の件で、最初は下記のように記述していたのですが、 var parameter = {}; parameter.piyo = 'abc'; parameter.moko = 'xyz'; $http({ method : 'POST', url : '/api/hogeFuga', params: parameter }).success(function(data, status, headers, config) { //成功 }).error(function(data, status, headers, config) { //失敗 }); これだと、リクエストURLが「http://a-know-home.appspot.com/api/hogeFuga?piyo=abc&moko=xyz」で「
CakePHPのrestfulインタフェースにAngularJSからリクエストしてデータを取得 CakePHPで効率的にrestful APIを開発 AngularJSでCRUD操作を行うアプリケーションを開発するにはどうすればよいか？ 本エントリーでは、 バックエンドにCakePHP フロントエンドにAngularJS を利用した開発ノウハウをCRUD操作の「Read」に焦点をあてて書いてみたい。 バックエンド側については、CakePHPで効率的に開発を進めることができる。具体的には公式ドキュメントの以下のURLを参考にrestful apiを組むことができる。 http://book.cakephp.org/2.0/ja/development/rest.html RecipesController.phpを作成し、以下のアクションを作成した。 class RecipesControl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く