my-bookmark/public/views/search.html

<div class="ui grid" style="height:45px">
    <div class="fourteen wide column" ng-show="!showSearch">
        共为您找到相关书签约{{bookmarkCount}}个
    </div>
    <div class="left floated right aligned two wide column" ng-show="!showSearch">
        <img class="ui ui middle aligned tiny image" ng-src="./images/cocktail.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch">
        <span ng-click="showSearch = !showSearch">搜索工具</span>
    </div>
    <div class="two wide column" ng-show="showSearch">
        <div class="ui dropdown js-user-range" js-dropdown-user-range-init>
            <div class="text" data-value="1">搜索范围</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="active item" data-value="1">自己书签</div>
                <div class="item" data-value="2">全站书签</div>
            </div>
        </div>
    </div>
    <div class="three wide column" ng-show="showSearch">
        <div class="ui dropdown item js-create-date" js-data-create-init>
            <div class="text">创建时间不限</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="active item" data-value='0'>时间不限</div>
                <div class="item" data-value='7'>一周内</div>
                <div class="item" data-value='30'>一月内</div>
                <div class="item" data-value='365'>一年内</div>
                <div class="divider"></div>
                <div class="header">自定义</div>
                <div class="ui transparent input">
                    <div class="ui calendar js-date-create-begin">
                        <div class="ui transparent input left icon">
                            <i class="calendar icon"></i>
                            <input type="text" placeholder="开始日期" ng-model="dateCreateBegin">
                        </div>
                    </div>
                </div>
                <div class="ui transparent input">
                    <div class="ui calendar js-date-create-end">
                        <div class="ui transparent input left icon">
                            <i class="calendar icon"></i>
                            <input type="text" placeholder="结束日期" ng-model="dateCreateEnd">
                        </div>
                    </div>
                </div>
                <div class="ui transparent input">
                    <div class="ui basic button" ng-click="updateCreateDate()">确定</div>
                </div>
            </div>
        </div>
    </div>
    <div class="three wide column" ng-show="showSearch">
        <div class="ui dropdown item js-click-date" js-data-click-init>
            <div class="text">点击时间不限</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="active item" data-value='0'>时间不限</div>
                <div class="item" data-value='7'>一周内</div>
                <div class="item" data-value='30'>一月内</div>
                <div class="item" data-value='365'>一年内</div>
                <div class="divider"></div>
                <div class="header">自定义</div>
                <div class="ui transparent input">
                    <div class="ui calendar js-date-click-begin">
                        <div class="ui transparent input left icon">
                            <i class="calendar icon"></i>
                            <input type="text" placeholder="开始日期" ng-model="dateClickBegin">
                        </div>
                    </div>
                </div>
                <div class="ui transparent input">
                    <div class="ui calendar js-date-click-end">
                        <div class="ui transparent input left icon">
                            <i class="calendar icon"></i>
                            <input type="text" placeholder="结束日期" ng-model="dateClickEnd">
                        </div>
                    </div>
                </div>
                <div class="ui transparent input">
                    <div class="ui basic button" ng-click="updateClickDate()">确定</div>
                </div>
            </div>
        </div>
    </div>
    <div class="three wide column" ng-show="showSearch">
        <div class="ui transparent icon input" ng-show="!showTags">
            <input class="prompt" type="text" placeholder="用户账号" ng-model="username">
        </div>
        <select class="ui fluid search dropdown" multiple="" ng-show="showTags">
            <option value="">State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
        </select>
    </div>
    <div class="two wide column" ng-show="showSearch">
        <div class="ui transparent input">
            <input type="text" placeholder="标题，链接..." ng-model="searchWord">
        </div>
    </div>
    <div class="left floated right aligned one wide column" ng-show="showSearch">
        <i class="search icon" title="搜索" ng-click="search()"></i>
    </div>
    <div class="left floated right aligned two wide column" ng-show="showSearch">
        <img class="ui ui middle aligned tiny image" ng-src="./images/hide.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch">
        <span ng-click="showSearch = !showSearch">收起</span>
    </div>
</div>
<table class="ui celled table">
    <thead>
        <tr>
            <th>标题</th>
            <th>链接</th>
            <th style="width:90px;">点击次数</th>
            <th style="width:100px;">创建日期</th>
            <th style="width:100px;">最后点击</th>
            <th style="width:150px;">分类</th>
            <th style="width:105px;">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
            <td>
                <img class="ui ui middle aligned tiny image" src="http://www.google.com/s2/favicons?domain={{bookmark.url}}" style="width:16px;height:16px">
                <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}">
                    {{ bookmark.title }}
                </span>
            </td>
            <td ng-click="jumpToUrl(bookmark.url, bookmark.id)">
                <span title="{{bookmark.url}}">{{ bookmark.url }}</span>
            </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>
            <td>
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark.id)">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark.id)">
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="7">
                <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>