Question

我是Angular JS框架的初学者，我制作了一个客户公司表，并使用下拉菜单按公司名称过滤客户。但是，如果我想使用＆＃34;＃/ client / company.name = A＆＃34;等URL来过滤结果呢？通过单击该链接，只显示过滤结果 - 如何根据Angular JS中的URL过滤结果？我已动态生成链接，但如何使用URL过滤结果？这是我的Jsfiddle link

`

总过滤客户：{{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，我的字符串将是＆＃34; /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参数。

的 E.g。

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

您的网址将类似于＃/ clients？company = A ，其中公司是密钥， A 是的值即可。

您将能够通过 $ routeParams.company 提取url参数。

此处为Jsfiddle link 。

示例代码：

＆＃39;使用严格的＆＃39;;

根据网址过滤结果，同时使用角度

2 个答案: