我正在尝试从搜索栏接收的输入中应用数据表中的过滤器。我的应用程序的标题中有一个输入字段。在该搜索栏中输入值时,我需要将该页面重定向到' http://localhost:1001/#/employees'页面和过滤应该应用。
标题html:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" ng-controller="getUserHeader">
<div class="container">
<form class="navbar-search pull-right" ng-submit="applySearch()">
<input id="input-search" class="search-query" name="mysearch" ng-model="mysearch" placeholder="Search">
</form>
</div>
</div>
</div>
</div>
标头控制器:
myApp.controller('getUserHeader', ['$scope', 'commonServices', 'dataTable', '$rootScope', '$location', '$filter', function ($scope, commonServices, dataTable, $rootScope, $location, $filter) {
commonServices.getReservations().then(function (result) {
$scope.data = result.data;
$scope.applySearch = function () {
alert($scope.mysearch);
}
});
}]);
我想将mysearch值传递给部分视图中包含的数据表上的过滤器&#39; http://localhost:1001/#/employees&#39;。该页面的HTML代码和控制器代码是
HTML:
<div class="row">
<div class="span12">
<div class="widget widget-table action-table">
<div class="widget-header"> <i class="icon-th-list"></i>
<h3>Employee</h3>
</div>
<div class="widget-content table-container" ng-controller="getEmployeesController" >
<table ng-table="employeesList" show-filter="true" class="table table-striped table-bordered">
<tr ng-repeat="employee in $data">
<td data-title="'#'">
{{ (itemsPerPage * (pageNumber-1)) + $index+1 }}
</td>
<td data-title="'First Name'" sortable="'firstName'" filter="{ 'firstName': 'text' }">
{{employee.firstName}}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
此页面内的过滤工作正常。
控制器:
myApp.controller('getEmployeesController', ['$scope', 'employeeServices', 'dataTable', '$window', '$timeout', '$filter', function ($scope, employeeServices, dataTable, $window, $timeout, $filter) {
employeeServices.getEmployees().then(function (result) {
$scope.data = result.data;
});
数据表在App.js文件中配置:
myApp.factory('dataTable', ['$filter', 'ngTableParams', function($filter, ngTableParams) {
var factoryDefinition = {
render: function($scope, config, componentId, data) {
if(!config) config ={};
var config = angular.extend({}, {page:1, count:10}, config)
$scope[componentId] = new ngTableParams(config, {
total: data.length, // length of data
getData: function ($defer, params) {
// organize filter as $filter understand it (graph object)
var filters = {};
angular.forEach(params.filter(), function (val, key) {
var filter = filters;
var parts = key.split('.');
for (var i = 0; i < parts.length; i++) {
if (i != parts.length - 1) {
filter[parts[i]] = {};
filter = filter[parts[i]];
}
else {
filter[parts[i]] = val;
}
}
});
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, filters) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
$scope.pageNumber = params.page();
$scope.itemsPerPage = params.count();
}
});
}
}
return factoryDefinition;
}
]);
所以基本上我在标题和局部视图中都有不同的控制器。我想在标题的搜索栏上输入一个字符串,然后输入click,它应该重定向到局部视图并在内部包含的数据表上应用过滤器。
我该怎么做到这一点?可悲的是,我无法为此创造一个掠夺者。
这是在从局部视图(https://i.imgsafe.org/595e6265b7.jpg)中应用过滤器时将值传递到App.js文件的方式。我添加了这个,以便您可以看到自定义数据表的工作原理。
提前致谢。