使用搜索栏根据搜索字符串

时间:2016-11-09 10:20:37

标签: javascript angularjs datatable angularjs-filter

我正在尝试从搜索栏接收的输入中应用数据表中的过滤器。我的应用程序的标题中有一个输入字段。在该搜索栏中输入值时,我需要将该页面重定向到' 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文件的方式。我添加了这个,以便您可以看到自定义数据表的工作原理。

提前致谢。

0 个答案:

没有答案