使用查询字符串参数过滤数据

Question

I have 2 files:

module.js with the following code:

angular.module('App.fragments.Jobs', []).
config(['$stateProvider', function($stateProvider) {
    $stateProvider
        .state('jobs', {
            url: '/trabajos',
            templateUrl: '/templates/jobs/list.html',
            controller: 'JobsListCtrl'
        });
}]);

jobs-list-ctrl.js with the following code:

angular.module('App.fragments.Jobs')
.controller('JobsListCtrl', ['$scope', 'JobsListService', function ($scope, JobsListService) {
    $scope.filter = function() {
        JobsListService.loadJobs($scope.filters, function(_response) {
            console.log(_response.length, "jobs...");
        });
    };

    $scope.filter();
}]);

I'm accessing this through lean.domain.com/apps/hub/noop#/trabajos

The problem is that I want to pass params through my url like this:

I'm accessing this through lean.domain.com/apps/hub/noop#/trabajos?param_one=value_one&param_two=value_two...

and then, take those values in my controller to filter data using the filter method shown before. Something like this:

angular.module('App.fragments.Jobs')
.controller('JobsListCtrl', ['$scope', 'JobsListService', function ($scope, JobsListService) {

    //Parse value_one&param_two=value_two from url
    //and fill $scope.filters with value like
    //{param_one: value_one, param_two: value_two}

    $scope.filter = function() {
        JobsListService.loadJobs($scope.filters, function(_response) {
            console.log(_response.length, "jobs...");
        });
    };

    $scope.filter();
}]);

I read about $location and ui-router and $stateParams but I'm not sure what is the best way to do this and why.

Answer 1

If you want to extract what's in your query string you can you $location like this:

for this url lean.domain.com/apps/hub/noop#/trabajos?param_one=value_one&param_two=value_two, you can use $location.search() that returns the query string in JavaScript object format.