my-bookmark/public/views/bookmarks.html

<div class="ui segment" ng-if="showStyle === 'navigate'">
    <div class="ui internally grid">
        <div class="row" ng-repeat="tag in bookmarks">
            <div class="one wide column">
                <span style="color:#0aa770;">{{ tag.name }}</span>
            </div>
            <div class="fourteen wide column">
                <div class="ui grid container">
                    <div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
                        <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
                        <span>{{ bookmark.title}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui segment" ng-if="false">
    <div class="ui raised" ng-repeat="tag in bookmarks">
        <!-- <a class="ui orange ribbon label" style="margin-bottom:20px">{{ tag.name }}</a> <span></span> -->
        <div class="ui grid container">
            <div class="two wide column">
                <i class="bookmark icon"></i><span>{{ tag.name }}</span>
            </div>

            <div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
                <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
                <span>{{ bookmark.title}}</span>
            </div>
        </div>
        <div class="ui divider"></div>
    </div>
</div>

<div class="ui small menu js-search-detail" ng-if="showSearch">
    <div class="ui dropdown item">
        <div class="text">搜索范围</div>
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">自己书签</div>
            <div class="item">全站书签</div>
        </div>
    </div>
    <div class="item" style="width:136px;">
        <div class="ui calendar js-date-begin">
            <div class="ui transparent input left icon">
                <i class="calendar icon"></i>
                <input type="text" placeholder="开始日期">
            </div>
        </div>
    </div>
    <div class="item" style="width:136px;">
        <div class="ui calendar js-date-end">
            <div class="ui transparent input left icon">
                <i class="calendar icon"></i>
                <input type="text" placeholder="结束日期">
            </div>
        </div>
    </div>
    <div class="ui dropdown item">
        <div class="text">点击次数</div>
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">大于</div>
            <div class="item">小于</div>
        </div>
    </div>
    <div class="ui item transparent icon input" style="width:120px;">
        <input class="prompt" type="text" ng-model="keyword" placeholder="点击次数">
    </div>
    <div class="ui item transparent icon input" style="width:120px;">
        <input class="prompt" type="text" ng-model="keyword" placeholder="用户账号">
    </div>
    <div class="ui item transparent icon input" style="width:160px;">
        <input type="text" placeholder="标题，链接，分类">
    </div>
    <div class="right item">
        <div class="ui button">搜索</div>
    </div>
</div>
<table class="ui celled table" ng-if="showStyle === 'table'">
    <thead>
        <tr>
            <th>标题</th>
            <th>链接</th>
            <th>点击次数</th>
            <th>创建日期</th>
            <th>最后点击日期</th>
            <th>分类</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="bookmark in bookmarks">
            <td>
                <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{bookmark.url}}" style="width:16px;height:16px">
                <span>
                    <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}
                    </a>
                </span>
            </td>
            <td>{{ bookmark.url }}</td>
            <td>{{ bookmark.click_count }}</td>
            <td>{{ bookmark.created_at }}</td>
            <td>{{ bookmark.last_click }}</td>
            <td>
                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}">
                    {{ tag.name }}
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="6">
                <div class="ui right floated pagination menu">
                    <a class="icon item">
                        <i class="left chevron icon"></i>
                    </a>
                    <a class="item">1</a>
                    <a class="item">2</a>
                    <a class="item">3</a>
                    <a class="item">4</a>
                    <a class="icon item">
                        <i class="right chevron icon"></i>
                    </a>
                </div>
            </th>
        </tr>
    </tfoot>
</table>