123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <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>
|