87,903
社区成员
发帖
与我相关
我的任务
分享有关angularjs操作前台数据无法刷新页面的问题
首先这是我的前台页面效果：
[img=https://img-bbs.csdn.net/upload/201411/12/1415783075_246780.jpg][/img
当我第一次查询时，可以查询到如下结果出来，但是当我输入其他查询条件再次查询时，显示列表就无法更新了，下面是我的前台界面代码：
JSP代码（部分代码）;
JS代码（部分）：
我前台数据控制是通过angularjs来实现的，但是为什么会出现数据列表不刷新的情况呢，
我在网上也找了好多办法，都说是列表要先清空在填充数据，之后我就用了这样一段代码来试试，结果还是没用
始终还是无法解决啊，大神们该怎么办呢？？？？急急急啊！！！！
[img=https://img-bbs.csdn.net/upload/201411/12/1415783075_246780.jpg][/img
当我第一次查询时，可以查询到如下结果出来，但是当我输入其他查询条件再次查询时，显示列表就无法更新了，下面是我的前台界面代码：
JSP代码（部分代码）;
<body >
<div class="page-content" ng-controller="TargetDefinedController">
<div class="row">
<form>
<div class="form-group col-sm-12">
<div class="widget-header">
<h6>查询条件</h6>
<a href="#" data-action="collapse">
<i class="icon-chevron-up"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-main no-padding-right">
<table>
<tr>
<th class="col-sm-1">
<div class="col-sm-10 form-group">
<label class="col-sm-2 col-md-3 no-padding-right" for="indexId">
元数据ID</label>
<input id="indexId" type="text" ng-model="tMetaData.indexId"/>
</div>
</th>
<th class="col-sm-1">
<div class="col-sm-10 form-group">
<label class="col-sm-2 col-md-3 no-padding-right" for="chName">
元数据中文名 </label>
<input id="chName" type="text" ng-model="tMetaData.chName"/>
</div>
</th>
</tr>
<tr>
<th class="col-sm-1">
<div class="col-sm-10 form-group">
<label class="col-sm-2 col-md-3 no-padding-right" for="enName">
元数据英文名 </label>
<input id="enName" type="text" ng-model="tMetaData.enName"/>
</div>
</th>
<th class="col-sm-1">
<div class="col-sm-10 form-group">
<label class="col-sm-2 col-md-3 no-padding-right" for="indexNature">
元数据性质 </label>
<select id="indexNature" class="col-sm-6" ng-model="tMetaData.indexNature">
<option value="{{index}}" ng-repeat="index in indexNatures">{{index}}</option>
</select>
</div>
</th>
</tr>
<tr>
<th class="col-sm-1">
<div class="col-sm-10 form-group">
<label class="col-sm-2 col-md-3 no-padding-right" for="businessApplications">
业务应用领域 </label>
<select id="businessApplications" class="col-sm-6" ng-model="tMetaData.businessApplications">
<option value="{{business}}" ng-repeat="business in Business">{{business}}</option>
</select>
</div>
</th>
</tr>
<tr>
<th class="col-sm-1">
<div class="col-sm-10 form-group">
<button class="btn btn-sm btn-primary" ng-click="search()">
<i class="icon-ok bigger-110"></i>查询
</button>
</div>
</th>
</tr>
</table>
</div>
</div>
</div>
<table id="data-check-info-grid"></table>
<div id="data-check-grid-pager"></div>
</div>
</form>
</div>
</div>
</body>JS代码（部分）：
var targetDefinedApp = {
controller: {}
};
targetDefinedApp.controller.TargetDefinedController = function ($scope, $compile, $http) {
$scope.tMetaData = {};
$scope.search= function () {
$http({
method : 'POST',
url : '../TargetDefined/showTargetDefined.do',
data : JSON.stringify($scope.tMetaData), // pass in data as strings
headers : { 'Content-Type': 'application/json;charset=utf-8' }
}).success(function(message) {
if (message.status=='success') {
// jQuery("#data-check-info-grid").clearGridData();//每次查询数据前先清空表格数据
targetDefinedApp.showTargetDefined($scope,message);
$("#data-check-info-grid").trigger("reloadGrid");//每次查询之后再刷新数据，也就是重新加载数据
} else {
alert("操作失败："+message.errMsg);
return;
}
});
}
}
//数据元显示列表以及增删改查实现
targetDefinedApp.showTargetDefined=function($scope,message){
// jQuery("#data-check-info-grid").clearGridData();//每次查询数据前先清空表格数据
jQuery(function ($) {
var grid_selector = "#data-check-info-grid";//table所对应的id
var pager_selector = "#data-check-grid-pager";//page所对应的id
url='../TargetDefined/showTargetDefined.do';
datatype='local';
data=message.data;
mtype='POST';
title='';
showTargetDefinedGrid(grid_selector,pager_selector,url,datatype,data,mtype,title);//调用表格定义以及数据显示js
jQuery(grid_selector).jqGrid('navGrid',pager_selector,
{
edit : true,
editicon: 'icon-pencil blue',
add: true,
addicon: 'icon-plus-sign purple',
del : true,
delicon: 'icon-trash red',
search : true,
searchicon: 'icon-search orange',
refresh: true,
refreshicon : 'icon-refresh green'
},
{
//编辑操作
},
{
//添加操作
},
{
//删除操作
}
});
}
}
);
})
};
angular.module('targetDefinedApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'ngAnimate']).
config(function ($locationProvider, $httpProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller(targetDefinedApp.controller)
;
我前台数据控制是通过angularjs来实现的，但是为什么会出现数据列表不刷新的情况呢，
我在网上也找了好多办法，都说是列表要先清空在填充数据，之后我就用了这样一段代码来试试，结果还是没用
jQuery("#data-check-info-grid").clearGridData();//每次查询数据前先清空表格数据
或者：$("#data-check-info-grid").trigger("reloadGrid");//每次查询之后再刷新数据，也就是重新加载数据始终还是无法解决啊，大神们该怎么办呢？？？？急急急啊！！！！
...全文
请发表友善的回复…
发表回复
jaspone 2015-06-01
- 打赏
- 举报
楼主，angular有自动数据绑定功能，只要绑定的model改变页面就会刷新，完全不用手动去刷新的（当然，也是可以手动刷新的，只要用 $apply()）。不推荐angular和JQ混用，除非真的有功能是angular完成不了的。
