根据URL过滤结果，并使用angular同时在下拉框中选择选项

Question

我是Angular JS框架的初学者，我制作了一个client-company表，并使用下拉菜单按公司名称过滤了客户。 但是，如果我想使用“＃/ client / company.name = A”之类的URL过滤结果，并单击该链接，只会显示过滤的结果-如何在Angular JS中基于URL过滤结果？ 我已经动态生成了链接，但是如何使用URL过滤结果？ 这是我的Jsfiddle链接

`

已过滤的客户总数：{{filtered.length}}

  </div> </li> <li> <div class="btn-group" data-ng-class="{open: open}"> <button class="btn">Filter by Company</button> <button class="btn dropdown-toggle" data-ng-click="open=!open"><span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a data-ng-click="checkAll()"><i class="icon-ok-sign"></i> Check All</a> </li> </li> <li class="divider"></li> <li data-ng-repeat="company in companyList"> <a data-ng-click="setSelectedClient()">{{company.name}}<span data-ng-class="isChecked(company.name)"></span></a> </li> </ul> </div> </li> </ul> <hr/> <h3>Size Table:</h3> <table class="table table-hover table-striped"> <thead> <tr> <th style="width:20%">Company</th> <th style="width:40%">Designation</th> <th style="width:30%">Name</th> </tr> </thead> <tbody> <tr data-ng-repeat="client in filtered = (clients | companyFilter:selectedCompany)"> <td><a href= "#!/clients/name= {{client.company.name}}">{{client.company.name}}</a></td> <td>{{client.designation}}</td> <td>{{client.name}}</td> </tr> </tbody> </table> 

`我的js代码是：

  'use strict'; var App = angular.module('clientApp', ['ngResource', 'App.filters']); App.controller('ClientCtrl', ['$scope', function ($scope) { $scope.selectedCompany = []; $scope.companyList = [{ name: 'A' }, { name: 'B' }, { name: 'C' }]; $scope.clients = [{ name: 'Gray', designation: 'Manager', company: { name: 'A' } }, { name: 'White', designation: 'M', company: { name: 'A' } },{ name: 'White', designation: 'M', company: { name: 'B' } },{ name: 'White', designation: 'Senior', company: { name: 'B' } },{ name: 'White', designation: 'Junior', company: { name: 'C' } }, { name: 'White', designation: 'M', company: { name: 'A' } },]; $scope.setSelectedClient = function () { var name = this.company.name; if (_.contains($scope.selectedCompany, name)) { $scope.selectedCompany = _.without($scope.selectedCompany, name); } else { $scope.selectedCompany.push(name); } return false; }; $scope.isChecked = function (name) { if (_.contains($scope.selectedCompany, name)) { return 'icon-ok pull-right'; } return false; }; $scope.checkAll = function () { $scope.selectedCompany = _.pluck($scope.companyList, 'name'); }; 

}]）;

 angular.module('App.filters', []).filter('companyFilter', [function () { return function (clients, selectedCompany) { if (!angular.isUndefined(clients) && !angular.isUndefined(selectedCompany) && selectedCompany.length > 0) { var tempClients = []; angular.forEach(selectedCompany, function (name) { angular.forEach(clients, function (client) { if (angular.equals(client.company.name, name)) { tempClients.push(client); } }); }); return tempClients; } else { return clients; } }; }]); 

我的查询字符串不是＃/ client / company？name = A，B，C，我的字符串将是“ /clients/company.name=A”，该表仅显示包含公司A的结果，公司A应该是在下拉菜单中标记。

Answer 1

您可以使用$location服务。 一种可能的解决方案是将此添加到您的控制器中：

$scope.location = $location;
$scope.$watch('location', function() {
    if($location.search().name)
    {
        $scope.selectedCompany = $location.search().name.split(',');
    }
});

假设您的查询字符串是： #/client/company?name=A,B,C

Answer 2

尝试注入ngRoute作为依赖项，并使用$ routeProvider和$ routeParams提取/获取URL中的参数。

您将可以使用$ routeParams提取url参数。

例如

您的网址路径： ＃/ clients 。 要在URL中设置参数，只需添加？company = A来设置$ routeParams对象 。

您的网址将类似于＃/ clients？company = A ，其中company是键，而A是值 。

您将可以通过$ routeParams.company提取url参数。



这是Jsfiddle链接 。

样例代码：

“严格使用”；

var app = angular.module('clientApp', ['ngRoute', 'App.filters']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/clients', {
            templateUrl: '/this.html',
            controller: 'ClientCtrl'
        })
        .otherwise({redirectTo: '/clients'});
});

app.controller('ClientCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {
    var companyName = $routeParams.company;
    console.log($routeParams);

    $scope.selectedCompany = [];
    $scope.companyList = [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'}
    ];

    $scope.clients = [{
        name: 'Gray',
        designation: 'Manager',
        company: {name: 'A'}
    }, {
        name: 'White',
        designation: 'M',
        company: {name: 'A'}
    }, {
        name: 'White',
        designation: 'M',
        company: {name: 'B'}
    }, {
        name: 'White',
        designation: 'Senior',
        company: {name: 'B'}
    }, {
        name: 'White',
        designation: 'Junior',
        company: {name: 'C'}
    }, {
        name: 'White',
        designation: 'M',
        company: {name: 'A'}
    }];

    if (companyName) {
        if (_.contains($scope.selectedCompany, companyName)) {
            $scope.selectedCompany = _.without($scope.selectedCompany, companyName);
        } else {
            $scope.selectedCompany.push(companyName);
        }
    }

    $scope.setSelectedClient = function() {
        var name = this.company.name;
        if (_.contains($scope.selectedCompany, name)) {
            $scope.selectedCompany = _.without($scope.selectedCompany, name);
        } else {
            $scope.selectedCompany.push(name);
        }
        return false;
    };

    $scope.isChecked = function(name) {
        if (_.contains($scope.selectedCompany, name)) {
            return 'icon-ok pull-right';
        }
        return false;
    };
}]);

对于ngRoute文档： https : //docs.angularjs.org/api/ngRoute/service/