我在前端显示数据时遇到问题
从服务器获取数据后我无法重新创建表（我使用DWR从服务器获取数据）
点击表格标题后，我在sort()内拨打sort()，调用getObj()功能，调用DWR来获取数据，
当我点击搜索按钮时，我得到所选选项的值并输入字段值并通过getObj将其传递给DWR调用.....这就是我的问题，当我点击表头时，显示获取的数据，但是当我点击搜索按钮时，它不显示。
这是我的控制器和功能 -
var searchApp = angular.module('searchApp', []),
selectData = [];
var inputValue='Yahoo',
filterValue='0'
searchApp.controller('searchCtrl', function ($scope) {
$scope.results = [];
$scope.filterOption=0;
$scope.filters = [
{id:1,value:'Campaign'},
{id:2,value:'Account'},
{id:3,value:'Publisher Url'},
{id:4,value:'Email Address'}
];
$scope.obj = [];
$scope.loaded = false;
$scope.isSorting = false;
$scope.inputData='yahoo';
// Default sort order
$scope.sortValue = 'categoryId';
$scope.isSortAsc = false;
$scope.headList = [
{
name: '',
value: '',
css: ''
},
{
name: 'Name',
value: 'value',
css: 'col-sort-asc'
},
{
name: 'Type',
value: 'categoryId',
css: 'col-sort'
}
]
// build array
/*angular.forEach(resultsObj, function (obj, key) {
/*$scope.filters.push({
value: key,
name: obj.label
});
for (var i = 0; i < obj.item.length; i++) {
$scope.results.push({
label: obj.label,
name: obj.item[i].name
});
}
});*/
$scope.getObj = function() {
// Add the dialog loader
dialog.load.init();
dialog.load.add('search');
// Make the DWR call
console.log($scope.isSortAsc,$scope.sortValue,inputValue,filterValue);
BimDWRLogic.getSearchByCateogry($scope.isSortAsc,$scope.sortValue,inputValue,filterValue, function(obj) {
$scope.$apply(function() {
$scope.setObj(obj);
// Complete the dialog loader
dialog.load.complete('search');
});
});
};
// ==================================================
// Set Object
// ==================================================
$scope.setObj = function(obj) {
$scope.obj = obj;
console.log('Length is '+$scope.obj.list.length);
for(i=0;i<$scope.obj.list.length;i++)
{
console.log($scope.obj.list[i].categoryId);
console.log($scope.obj.list[i].value);
}
//dialog.load.init();
//dialog.load.add('performance-summary-chart');
// Load the chart
// Sometimes the div is not there
// TODO: might be a better way of handling this
// Don't load the chart if we are sorting
/*if($scope.isSorting !== true){
window.setTimeout(function(){
$scope.loadChart();
}, 500);
}*/
$scope.isSorting = false;
$scope.loaded = true;
};
$scope.search=function(){
inputValue=$scope.inputData;
console.log('Input value is '+inputValue);
$scope.getObj();
}
$scope.filterCriteria=function(opt){
$scope.filterOption=opt;
filterValue=opt;
console.log('Selected Criteria is '+filterValue);
}
$scope.sort = function(value){
// Return if the column object is not sortable
if(value === ''){
return false;
}
// Sets the Data Value
if(value === $scope.sortValue){
if($scope.isSortAsc === false){
$scope.isSortAsc = true;
}else{
$scope.isSortAsc = false;
}
}else{
$scope.sortValue = value;
$scope.isSortAsc = false;
}
// Sets the Style
// Note: we don't loop through the first row
for(var i=1; i<$scope.headList.length; i++){
if(value === $scope.headList[i].value){
if($scope.isSortAsc === true){
$scope.headList[i].css = 'col-sort-asc';
}else{
$scope.headList[i].css = 'col-sort-desc';
}
}else{
$scope.headList[i].css = 'col-sort';
}
}
console.log('Inside Sort '+$scope.isSortAsc+' '+$scope.sortValue+' '+inputValue+' '+filterValue);
// Get the object
$scope.isSorting = true;
$scope.getObj();
};
});
这是html页面模板，我在jsp页面中包含了这个页面
HTML页面 -
<table class="table table-index search-results">
<thead>
<tr class="info">
<th colspan="3">
<div>Filter By:
<select ng-model="searchData" ng-options="f.id as f.value for f in filters" class="search-filter" ng-change="filterCriteria(searchData)">
<option>--none--</option>
</select>
</div>
</th>
</tr>
<tr>
<th ng-repeat="th in headList" class="{{th.css}}" ng-click="sort(th.value)">{{th.name}}</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"> </td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="resultObj in obj.list">
<td>{{$index + 1}}.</td>
<td>{{resultObj.categoryId}}</td>
<td>{{resultObj.value}}</td>
</tr>
</tbody>
</table>
and jsp page is
<div class="container-fluid" ng-app="searchApp">
<h1>Search Results</h1>
<section class="group" ng-controller="searchCtrl">
<input type="text" class="search-input" ng-model="inputData"/><div id="button1" class="btn btn-lg btn-search" ng-click="search()">Search</div>
<div>74 results</div>
</section>
<section>
<!-- Search Results -->
<div class="row">
<div class="col-12" id="searchCtrl" ng-controller="searchCtrl" ng-include="'views/search.htm'"></div>
</div>
</section>
</div>
答案 0 :(得分：0)
问题与搜索结果html模板中缺少控制器有关。 我认为它会起作用：
<table class="table table-index search-results" ng-controller="searchCtrl">
<thead>
<tr class="info">
<th colspan="3">
<div>Filter By:
<select ng-model="searchData" ng-options="f.id as f.value for f in filters" class="search-filter" ng-change="filterCriteria(searchData)">
<option>--none--</option>
</select>
</div>
</th>
</tr>
<tr>
<th ng-repeat="th in headList" class="{{th.css}}" ng-click="sort(th.value)">{{th.name}}</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"> </td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="resultObj in obj.list">
<td>{{$index + 1}}.</td>
<td>{{resultObj.categoryId}}</td>
<td>{{resultObj.value}}</td>
</tr>
</tbody>
</table>
但更好的方法是用一个标签包装你的部分并使用一个控制器声明。