好的前端界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include.inc.jsp"%>
<link href="<c:url value='/resources/css/feedback.css'/>"
rel="stylesheet" type="text/css">
<div ng-cloak class="page-body ng-cloak" ng-app="CyberApp"
ng-controller="CyberPage">
<div class="pm_content pm_overflow bg">
<div class="pm_float_left pm_content_single">
<div class="pm_content_distance">
<div class="pm_content_title_h1">
<h1 class="pm_content_title3" style="pading:0px;">
<span>企业通讯录</span>
</h1>
</div>
<ul>
<!-- ngRepeat: r in repairs -->
</ul>
</div>
</div>
</div>
<div class="row searchhelpbar">
  <div class="col-sm-6 search-box">
            <div>
                <span class="input-icon">
                <input type="text" class="form-control" id="user-name" placeholder="姓名">
                    <i class="glyphicon glyphicon-search circular blue"></i>
                </span>
            </div>
        </div>
        <div class="col-sm-6 search-box">
            <div>
                <span class="input-icon">
                    <input type="text" class="form-control" id="user-phone" placeholder="号码">
                    <i class="glyphicon glyphicon-search circular blue"></i>
                </span>
            </div>
        </div>
    </div>
<div class="row" >
<div ng-repeat="item in departsWithUsers" class="col-lg-4 col-sm-4 col-xs-12 departs">
<div class="widget">
<div class="widget-header">
<span class="widget-caption">{{item.name}}</span>
</div>
<div class="widget-body" style="height:300px; overflow-y:scroll;">
<table class="table table-striped table-bordered table-hover dataTable no-footer" id="simpledatatable" aria-describedby="simpledatatable_info">
<tbody>
<tr class="odd users" ng-repeat="user in item.users">
<td class="name">{{user.name}}</td>
<td class="phone">{{user.phone}}</td>
<td class="shortNum">{{user.shortNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>


<script src="<c:url value='/resources/js/angular.min.js'/>"></script>
<script src="<c:url value='/resources/js/angular-route.min.js'/>"></script>
<script src="<c:url value='/resources/js/angular/cyber.webapp.js'/>"></script>
<script src="<c:url value='/resources/js/angular/cyber.message.js'/>"></script>


<script>

$(function(){
$("#user-name")
   .keyup(function () {
       var name = $.trim(this.value);
       var phone = $.trim($("#user-phone").val());
       //alert(term);
       updateVisible(name, phone);
  });
});

$(function(){
$("#user-phone")
   .keyup(function () {
    var name = $.trim($("#user-name").val());
       var phone = $.trim(this.value);
       //alert(term);
       updateVisible(name, phone);
  });
});

function updateVisible(name, phone){
$(".departs").each(function(index,element){
var flag = false;
$(element).find(".users").each(function(index2,element2){
var targetName,targetPhone,targetShort;
targetName = $(element2).find(".name").eq(0).html();
targetPhone = $(element2).find(".phone").eq(0).html();
targetShort = $(element2).find(".shortNum").eq(0).html();
if(targetName.indexOf(name) > -1 && (targetPhone.indexOf(phone) > -1 || targetShort.indexOf(phone) > -1)){
flag = true;
$(element2).show();
}else{
$(element2).hide();
}
});
if(flag){
$(element).show();
}else{
$(element).hide();
}
});
}

var initialize = function($scope, $http, NetworkUtil, StringUtil) {
$scope.departsWithUsers = [];
$scope.getAlldeparts = function() {
var data = {};
var success = function(result) {
$scope.departsWithUsers = result.result;
};


var faild = function(result) {


};


NetworkUtil.cPost($http, 'qryDepartWithUsers', data, success,
faild);
}
$scope.getAlldeparts();
}
</script>

</div>

展示样式：一

展示样式：二