![HTMLの勣殆や奉來にC嬬を弖紗できます
<table class="table table-striped">?
<thead>?
<tr>?
<th>桑催</th>?
<th>兆念</th>?
</tr>?
</thead>?
<tbody>?
<tr ng-repeat="item in list">?
<td>{{item.no}}</td>?
<td>{{item.name}}</td>?
</tr>?
</tbody>?
</table>
ng-repeatは塘双をRり卦すDirective
var list = [?
{no: 1, name: "nobi"},
{no: 2, name: "zyai"},
{no: 3, name: "sune"}?
];
<tr ng-repeat="item in list">?](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/85/AngularJS-UI-14-320.jpg)
![箭えばこんな湖じで恬撹できます。
<ore-table data="list">?
<column title="桑催" name="no"></column>?
<column title="兆念" name="name"></column>?
</ore-table>
ore-tableという兆念で Dirctiveにカスタムタグを鞠h
var list = [?
{no: 1, name: "nobi"},
{no: 2, name: "zyai"},
{no: 3, name: "sune"}?
];
var m = angular.module("directives");?
?
m.directive("oreTable",
["$compile", function ($compile) {?
return {?
restrict: "E",?](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/85/AngularJS-UI-18-320.jpg)
![F壓の侘
<ore-grid data="vm" layout="gLayout"></ore-grid>?
<script th:inline="javascript">?
var globalLayout = /*[[${layout}]]*/ null;?
</script>?
Modelデ`タを峺協 レイアウト協xを峺協
Thymeleafで協xを托めzみ
var model = {
list: [?
{no: 1, name: "nobi"},
{no: 2, name: "zyai"},
{no: 3, name: "sune"}?
]
};](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/85/AngularJS-UI-22-320.jpg)
![<ore-grid data="vm" layout="gLayout"></ore-grid>?
<script th:inline="javascript">?
var globalLayout = /*[[${layout}]]*/ null;?
</script>?
var globalLayout = {
'gLayout':{
'modelId':'list',
'row':{
'columns':[
{'align':'right','name':'no','title':'u756Au53F7'},
{'align':'left','name':'name','title':'u540Du524D'}
]
}
}
};
Thymeleafで協xを托めzみ
サ`バ箸妊譽ぅ▲Ε版鵑鯢撹します](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/85/AngularJS-UI-23-320.jpg)
![竃薦Y惚
<ore-grid data="vm" layout="gLayout"></ore-grid>?
<script th:inline="javascript">?
var globalLayout = /*[[${layout}]]*/ null;?
</script>?
Modelデ`タを峺協 レイアウト協xを峺協
Thymeleafで協xを托めzみ](https://image.slidesharecdn.com/20140124angularjs-150124023723-conversion-gate01/85/AngularJS-UI-24-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (9)
Similar to 粥稼乙顎鉛温姻干皆で匍暦システム雨鴛何瞳晒 (20)
![Visual Studio Online BUILD を云櫃琶垢い海覆靴篤警|紳覆ゝ弔防呂欧襭 [ Comm Tech Festival ] C-4](https://cdn.slidesharecdn.com/ss_thumbnails/commtechfestivalvso2015build-150926103603-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
More from Toshio Ehara (20)
![Cocos2d/2d-x/html5 [Objective-C/C++/JavaScript] 挫みの冱Zはどれですか](https://cdn.slidesharecdn.com/ss_thumbnails/ltcocos20130608obccppjs-130609185929-phpapp02-thumbnail.jpg?width=560&fit=bounds)
粥稼乙顎鉛温姻干皆で匍暦システム雨鴛何瞳晒
- 1. 粥稼乙顎鉛温姻干皆で匍暦システム雨鴛何瞳晒 Photo by Web崙恬鬚o創亟寔殆可ぱくたそ http://www.pakutaso.com JavaQne(じゃばきゅん) 2015 Fukuoka (2015/01/24)
- 2. -徭失B初- 幄塀氏芙キャムの臭圻と賦します。 Excelとかプログラムとか採かイロイロしてます。 twitter : @itokami1123 二IのU藺圓牧杼△張稀`ビス仝CAM MACS々を AWSにて戻工してます。
- 5. 抖屡襪両僂
- 6. 朕議 - HTMLタグの峰で繁餓を竃さない - デザインを根むタグにしたい - 干皆(ブラウザ)で禽或珂を宙鮫したい
- 10. MV*フレ`ムワ`ク ModelView var data = { cd: 101, nm: "test" }; <div> {{data.cd}} {{data.nm}} </div> デ`タバインディング 101 test JSのObjectが 徭啀輅召気譴襪
- 11. MV*フレ`ムワ`ク ModelView <div> {{data.cd}} {{data.nm}} </div> デ`タバインディング Modelが笋錣襪 Viewに郡啌するよ var data = { cd: 102, nm: "test" }; 102 test
- 12. 朸拆碓艶界岳庄厩艶について
- 13. DirectiveはHTMLをするC嬬です <table class="table table-striped">? <thead>? <tr>? <th>桑催</th>? <th>兆念</th>? </tr>? </thead>? <tbody>? <tr ng-repeat="item in list">? <td>{{item.no}}</td>? <td>{{item.name}}</td>? </tr>? </tbody>? </table> ng-repeatは塘双をRり卦すDirective
- 14. HTMLの勣殆や奉來にC嬬を弖紗できます <table class="table table-striped">? <thead>? <tr>? <th>桑催</th>? <th>兆念</th>? </tr>? </thead>? <tbody>? <tr ng-repeat="item in list">? <td>{{item.no}}</td>? <td>{{item.name}}</td>? </tr>? </tbody>? </table> ng-repeatは塘双をRり卦すDirective var list = [? {no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"}? ]; <tr ng-repeat="item in list">?
- 15. <table class="table table-striped">? <thead>? <tr>? <th class="ore-no-style" >桑催</th>? <th>兆念</th>? </tr>? </thead>? <tbody>? <tr ng-repeat="item in list">? <td>{{item.no}}</td>? <td>{{item.name}}</td>? </tr>? </tbody>? </table> でも覆Directiveだけでは デザインをy匯するのがyしいです ( ふふふ、こっそりと e??????にしちゃおう
- 16. <table class="table table-striped">? <thead>? <tr>? <th class="ore-no-style" >桑催</th>? <th>兆念</th>? </tr>? </thead>? <tbody>? <tr ng-repeat="item in list">? <td>{{item.no}}</td>? <td>{{item.name}}</td>? </tr>? </tbody>? </table> でも覆Directive デザインをy匯するのがyしいです ( ふふふ、こっそりと e??????にしちゃおう
- 18. 箭えばこんな湖じで恬撹できます。 <ore-table data="list">? <column title="桑催" name="no"></column>? <column title="兆念" name="name"></column>? </ore-table> ore-tableという兆念で Dirctiveにカスタムタグを鞠h var list = [? {no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"}? ]; var m = angular.module("directives");? ? m.directive("oreTable", ["$compile", function ($compile) {? return {? restrict: "E",?
- 19. 竃薦Y惚 <ore-table data="list">? <column title="桑催" name="no"></column>? <column title="兆念" name="name"></column>? </ore-table> ore-tableという兆念で Dirctiveにカスタムタグを鞠h
- 22. F壓の侘 <ore-grid data="vm" layout="gLayout"></ore-grid>? <script th:inline="javascript">? var globalLayout = /*[[${layout}]]*/ null;? </script>? Modelデ`タを峺協 レイアウト協xを峺協 Thymeleafで協xを托めzみ var model = { list: [? {no: 1, name: "nobi"}, {no: 2, name: "zyai"}, {no: 3, name: "sune"}? ] };
- 23. <ore-grid data="vm" layout="gLayout"></ore-grid>? <script th:inline="javascript">? var globalLayout = /*[[${layout}]]*/ null;? </script>? var globalLayout = { 'gLayout':{ 'modelId':'list', 'row':{ 'columns':[ {'align':'right','name':'no','title':'u756Au53F7'}, {'align':'left','name':'name','title':'u540Du524D'} ] } } }; Thymeleafで協xを托めzみ サ`バ箸妊譽ぅ▲Ε版鵑鯢撹します
- 24. 竃薦Y惚 <ore-grid data="vm" layout="gLayout"></ore-grid>? <script th:inline="javascript">? var globalLayout = /*[[${layout}]]*/ null;? </script>? Modelデ`タを峺協 レイアウト協xを峺協 Thymeleafで協xを托めzみ
- 25. ⊥まとめと書朔について
- 26. - 瞳|を匯協にする? JavaScriptでDOMを宙鮫するHに? カスタムタグを聞喘しています? - お人阿厘李に鬉┐? レイアウト秤鵑妊謄鵐廛讒`トを伏撹してます? - 益芙でAngularJSで寄きく卆贋しているのは? カスタムタグ(Directive)のみ? - AngularJSに卆贋しない撹も篇しています? (★???????????でなく\りQえ) ⊥まとめと書朔について