index.html
5.7 KB
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<div php-extends="base"></div>
<div php-block="main" class="container">
<div class="jumbotron">
<h1>Hello Think Angular</h1>
<p>
此模板引擎针对能够使用angularjs的 php开发者 或 前端开发者 编写, 主要特点是, 不需要额外的标签定义, 全部使用属性定义, 写好的模板文件后, 在开发工具中无需插件即可格式化为很整洁的代码, 因为套完的模板文件还是规范的html.
</p>
<p>
注: 一个标签上可以使用多个模板属性, 属性有前后顺序要求, 所以要注意属性的顺序, 在单标签上使用模板属性时一定要使用<code>/></code>结束,
<br>
如:
<br>
<code><input php-literal="code" php-if="$is_download" type="button" value="下载" /></code>
<br>
<code><img php-literal="code" php-if="$article['pic']" src="{$article.pic}" /></code>
<br>
具体可参考后面的解析结果.
</p>
<p>
Github项目地址:
<a target="_blank" href="https://github.com/top-think/think-angular">https://github.com/top-think/think-angular</a>
</p>
<p>
<a class="btn btn-primary btn-lg" target="_blank" href="https://github.com/top-think/think-angular">Git版本库地址</a>
<a class="btn btn-primary btn-lg" target="_blank" href="http://kancloud.cn/shuai/php-angular" />在线文档</a>
</p>
</div>
<div class="row">
<div class="col-md-8">
<h4>表格和分页实例</h4>
<table class="table table-bordered">
<tr>
<th>编号</th>
<th>用户名</th>
<th>邮箱</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr php-if="$list" php-repeat="$list as $user">
<td>{$user.id}</td>
<td>{$user.name}</td>
<td>{$user.email}</td>
<td>
<div php-switch="$user['status']">
<span php-case="1">正常</span>
<span php-case="0">已禁用</span>
<span php-case="-1">已删除</span>
</div>
</td>
<td>
<a php-show="$user['status'] === 1" php-after="echo ' '" href="javascript:void(0);" class="btn btn-xs btn-warning">禁用</a>
<a php-show="$user['status'] === 0" php-after="echo ' '" href="javascript:void(0);" class="btn btn-xs btn-primary">启用</a>
<a php-show="$user['status'] >= 0" php-after="echo ' '" href="javascript:void(0);" class="btn btn-xs btn-danger">删除</a>
<a php-show="$user['status'] == -1" php-after="echo ' '" href="javascript:void(0);" class="btn btn-xs btn-primary">恢复</a>
</td>
</tr>
<tr php-else="不存在list的时候, 输出没有数据">
<td colspan="3" class="text-center">没有数据</td>
</tr>
</table>
<nav php-include="page"></nav>
<h2>自动选中: php-selected</h2>
<select class="form-control" php-init="$p = isset($_GET['p']) ? $_GET['p'] : 1">
<option php-for="$i = 1; $i <= 50; $i++" php-selected="$p == $i" value="{$i}">第{$i}页</option>
</select>
<h2>自动勾选: php-checked </h2>
<div
class="form-control"
php-init="$all_hobby = ['html','css','js','php', 'mysql', 'linux']"
php-init="$user_hobby = ['linux','css','js','php']">
技能:
<label class="checkbox-inline" php-repeat="$all_hobby as $hobby">
<input
type="checkbox"
name="hobby"
value="{$hobby}"
php-checked="in_array($hobby, $user_hobby)" /> {$hobby}
</label>
</div>
<br />
<div class="form-control" php-init="$user_sex = 1">
性别:
<label class="radio-inline">
<input type="radio" name="sex" value="0" php-checked="$user_sex === 0" /> 女
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="1" php-checked="$user_sex === 1" /> 男
</label>
</div>
<h2>自定义解析规则</h2>
<div php-dump="$navs"></div>
<div php-init="$i = 0" php-inc="$i" php-inc="$i">{$i}</div>
<div php-dec="$i">{$i}</div>
<h2>原样输出</h2>
<div php-literal="">{$title}</div>
<div php-literal="code">{$title}</div>
<br />
<php php-literal="code">{title} {$content}</php>
<h2>input数据绑定，自动转义特殊字符</h2>
<div>
<form action="?" method="post">
<input type="text" name="name" php-model="$name" />
<input type="submit" value="提交">
</form>
</div>
<p><br ／></p>
</div>
<div class="col-md-4">
<h4>无限级菜单输出</h4>
<ul php-init="echo_menu($menus)" php-function="echo_menu($menus)">
<li php-repeat="$menus as $menu">
{$menu.title}
<ul php-if="isset($menu['sub'])" php-call="echo_menu($menu['sub'])"></ul>
</li>
</ul>
</div>
</div>
</div>