LoginSignup
17
16

More than 5 years have passed since last update.

AngularJSのテンプレートで表示切替とかしたい

Last updated at Posted at 2013-06-21

コメントを頂いて、すごくスマートなやり方が分かった!
ng-classを使えばよいとのこと。ありがとうございます!

HTML
<!--書き方メモ-->
<ul ng-repeat="item in contents">
    <li ng-class="{'適用したいclass名': 条件式 }">{{item.text}}</li>
</ul>

<!-- valueがbadのものだけclass="blue"を適用 -->
<ul ng-repeat="item in contents">
    <li ng-class="{'blue': item.value == 'bad'}">{{item.text}}</li>
</ul>

<!-- indexが奇数の要素は非表示、あと他のclassも併用 #そんなに出番ない -->
<ul ng-repeat="item in contents">
    <li ng-class="{'hidden': !($index%2 == 0)}" class="blue">{{item.text}}</li>
</ul>

併用はng-classの中に一緒にいれたら怒られたのでこんな感じでいいのかな。
あと、下記の何かもっと極端な出しわけとかのときのif文くらいかな...?
そんなに出番はないかも...一応流れの補完に残しておきます。

昔のやつ↓


ここを参考にしつつ!: http://d.hatena.ne.jp/puruhime/20120730

もっと賢い方法はあるかもしれないけど、とりあえずこんな感じでやってみた
ng-classとか使うともうちょっとスマートになるのかな...?
とにかくモデルの値に応じてレイアウトを柔軟に切り替えたかった。

test.js
//適当なcontroller内にて
//こんなjsonオブジェクトを$scope.contentsに入れて渡す
//ミスってるかも
$scope.contents = [
{
    "value":"nice",
    "text":"(`・ω・´)"
},
{
    "value":"bad",
    "text":"(´・ω・`)"
},
{
    "value":"good",
    "text":"( ´∀`)bグッ!"
}
];
HTML
<!-- valueがbadのものだけclass="blue"を適用 -->
<ul ng-repeat="item in contents">
    <li class="{{( (item.value == 'bad') && 'blue' ) | '' }}">{{item.text}}</li>
</ul>

<!-- 先頭のliだけclass="active"にする -->
<ul ng-repeat="item in contents">
    <li class="{{( ($index == 0) && 'active' ) | '' }}">{{item.text}}</li>
</ul>

特定の要素だけ隠したいとかはhiddenを指定して嬉しくなったりしていました。
#時間無いときに適当に書いたのでもうちょっと例を具体的にしないとだめかも
#もっとスマートなやりかたがあるかも

17
16
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
16