AngularJS 動态模闆

AngularJS版本 : AngularJS v1.4.0-rc.1

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<code>&lt;!doctype html&gt;</code>

<code>&lt;</code><code>html</code> <code>ng-app</code><code>=</code><code>"dynamicTemplate"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"jslib/angular.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>angular.module('dynamicTemplate', []).controller('PhoneListCtrl',function($scope) {</code>

<code>        </code><code>$scope.phones = [</code>

<code>            </code><code>{</code>

<code>                </code><code>"name": "Nexus S",</code>

<code>                </code><code>"snippet": "Fast just got faster with Nexus S."</code>

<code>            </code><code>},</code>

<code>                </code><code>"name": "Motorola XOOM with Wi-Fi",</code>

<code>                </code><code>"snippet": "The Next, Next Generation tablet."</code>

<code>                </code><code>"name": "MOTOROLA XOOM",</code>

<code>            </code><code>}</code>

<code>        </code><code>];</code>

<code>    </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>ng-controller</code><code>=</code><code>"PhoneListCtrl"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>ul</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>li</code> <code>ng-repeat</code><code>=</code><code>"phone in phones"</code><code>&gt;</code>

<code>                </code><code>`phone`.`name`</code>

<code>                </code><code>&lt;</code><code>p</code><code>&gt;`phone`.`snippet`&lt;/</code><code>p</code><code>&gt;</code>

<code>            </code><code>&lt;/</code><code>li</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>ul</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>p</code><code>&gt;Total number of phones: `phones`.`length`&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>table</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>tr</code><code>&gt;&lt;</code><code>th</code><code>&gt;row number&lt;/</code><code>th</code><code>&gt;&lt;/</code><code>tr</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>tr</code> <code>ng-repeat</code><code>=</code><code>"i in [0, 1, 2, 3, 4, 5, 6, 7]"</code><code>&gt;&lt;</code><code>td</code><code>&gt;{{'row number : '+(i+1)}}&lt;/</code><code>td</code><code>&gt;&lt;/</code><code>tr</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>table</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1651667