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

Question

我是 Angular JS 框架的初学者，我制作了一个客户公司表并使用下拉菜单按公司名称过滤客户。但是，如果我想使用"#/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 参数。例如
您的网址路径：#/客户端。要在 URL 中设置参数，只需添加 ？company=A 即可设置$routeParams对象。您的 URL 类似于 #/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/