2014年9月5日金曜日

2014/09/06 その2 AngularJS福岡勉強会(第2回) - DOM制御とか装飾とか -

01. ng-class


ng-classを使うとclassの切り替えが出来ます。
ng-class="{ 'panel-info': !isDanger, 'panel-danger': isDanger  }" と書くと
isDangerが trueの時に'panel-danger'class(スタイルシート)が
isDangerが falseの時に'panel-info'がDOM要素につけられます。

02. ng-style


ng-styleを使うとstyleの切り替えが出来ます。

03. ng-if


ng-ifを使うと要素の表示・非表示ができます。
☆ポイント☆
display:none;ではなくて要素が作られたり消されたりします。

04. ng-if with animation


ng-ifにAnimationを追加できます
☆ポイント☆
angular-animate.jsを読んでangular.module('app', ['ngAnimate']);とモジュール追加すること
CSSでアニメーション情報を指定してあげること
jsFIddleの.ng-enter ,.ng-leave, .ng-leave.ng-leave-active, .ng-enter.ng-enter-activeを参照

05. ng-show


ng-showも要素の表示・非表示ができます。
☆ポイント☆
display:none;で表示・非表示を切り替えてます。

06. ng-show with animation


ng-showも要素の表示・非表示ができます。
☆ポイント☆
Migrating from 1.2 to 1.3
https://docs.angularjs.org/guide/migration
書き方がかわったみたい
Migrating from 1.2 to 1.3




twitterのハッシュタグ

質問やこうした方がいいよ〜とかありましたら、↓につぶやいてください〜

#ng_fukuoka

0 件のコメント:

コメントを投稿