April 3, 2014

AngularJSとAngularUIでBootstrapのModalを使う

AngularUIという、AngularJSを使ったUI開発用モジュール群があります。
http://angular-ui.github.io/
https://github.com/angular-ui

その中の"UI Bootstrap"を使うと、BootstrapのModalをAngularJSっぽく簡単に使うことができました。
http://angular-ui.github.io/bootstrap/

ソースは以下のような感じになります。
http://jsfiddle.net/mamor/4KBWj/

上記でAngularJSの他に読み込んでいるcssとjsは

Bootstrap公式のcss
https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

ui-bootstrap-tpls.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js

です。また、Modalで使用するHTMLのテンプレートは、インラインではなく外部ファイルにすることもできました。

一つのモーダルを、ng-repeatで繰り返した全データで共用するのとか簡単に出来て楽だなーと思いました。

No comments:

Post a Comment