angular.jsをチュートリアルから学ぶ step3 Filtering Repeaters
Step3との差分 絞込フォームの追加 <input ng-model="query"> ng-repeatへfilter:queryを追加 <ul> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> ソースを読むと何となく分かるのですが、 inputへ入力した文字で動的にリストの中身を検索して動的に表示をしています。 こんな感じでフォームに入力した文字列を探して表示を行います。 ソース全体 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <div class="container" ng-app="phonecatApp"> <div
angular.jsをチュートリアルから学ぶ step4 Two-way Data Binding
angular.jsをチュートリアルから学ぶ step4 Two-way Data Binding 2013.10.26 javascript Prog angular.js, javascript step3との差分ソースコード セレクトボックス部分 <select ng-model="orderProp"> <option value="name">アルファベット順</option> <option value="age">新着順</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> リスト要素の中にorderBy要素が追加さ
angular.jsをチュートリアルから学ぶ
JavaScriptフレームワークであるangularjsを最近調べています。 フロントエンドのフレームワークがまだ不慣れで何ができるかまだ手探りの状態ですので、 動く物をどんどん掲載していこうと思います。 angularjsのサイトにあったチュートリアルをもとに、 ひとまず動きがわかる物を追っていきます。 チュートリアルstep0 はじめのチュートリアルは 0-Bootstraping http://docs.angularjs.org/tutorial/step_00 cssなどは今回外して掲載しています。 index.html <!DOCTYPE HTML> <html lang="ja" ng-app> <head> <meta charset="utf-8"> </head> <body> <p>1 + 2 = {{1 + 2}}</p> <p>2 * 2 = {{2 * 2}}
angular.jsを試してみた
話題のangular.jsを試してみた Googleからangular.jsを試してみた。 http://angularjs.org/ まだこれで何ができるかわかっていない状況の手探りですががんばっていこうと思います。 基本部分のobject表示をさせるブツを作成してみました。 object操作だけでDOM系が操作できるのはすごいですねー。 table上に要素を表示させる簡単な物を作ってみます。 javascript部分 objectに直接データを入れて、追加して、3番目の要素を削除しています。 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script type="text/javascript"> angular.module('angular_a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
